{"id":16949479,"url":"https://github.com/guastallaigor/vue-image-kit","last_synced_at":"2025-03-22T13:31:21.438Z","repository":{"id":36629528,"uuid":"227635261","full_name":"guastallaigor/vue-image-kit","owner":"guastallaigor","description":"Vue.js Image Kit Component with Lazy Load built in and Responsive Images","archived":false,"fork":false,"pushed_at":"2022-12-13T20:06:47.000Z","size":2092,"stargazers_count":10,"open_issues_count":20,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T03:02:55.618Z","etag":null,"topics":["component","image","image-kit","kit","lazy-load","lazy-load-img","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-image-kit.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/guastallaigor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"ko_fi":"guastallaigor"}},"created_at":"2019-12-12T15:15:12.000Z","updated_at":"2023-07-05T03:15:51.000Z","dependencies_parsed_at":"2023-01-17T03:30:45.891Z","dependency_job_id":null,"html_url":"https://github.com/guastallaigor/vue-image-kit","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-image-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-image-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-image-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/guastallaigor%2Fvue-image-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/guastallaigor","download_url":"https://codeload.github.com/guastallaigor/vue-image-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221829956,"owners_count":16887719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","image","image-kit","kit","lazy-load","lazy-load-img","vue","vuejs"],"created_at":"2024-10-13T21:54:54.287Z","updated_at":"2024-10-28T12:56:53.100Z","avatar_url":"https://github.com/guastallaigor.png","language":"JavaScript","funding_links":["https://ko-fi.com/guastallaigor","https://ko-fi.com/C1C63QCB8"],"categories":["UI Components [🔝](#readme)","Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./.github/logo.png\" width=\"200px\"\u003e\n  \u003ch1\u003eVue Image Kit\u003c/h1\u003e\n\u003c/div\u003e\n\u003cp align=\"center\"\u003e\n  Vue.js Image Kit Component with Lazy Load built in and Responsive Images\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  The inspiration comes from \u003ca href=\"https://codesandbox.io/s/vue-lazy-load-image-ls9rh?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FApp.vue\u0026theme=dark\" target=\"_blank\"\u003ethis\u003c/a\u003e and a talk from \u003ca href=\"https://github.com/derevandal\" target=\"_blank\"\u003e@derevandal\u003c/a\u003e in \u003ca href=\"https://github.com/femug\" target=\"_blank\"\u003e@femug\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://circleci.com/gh/guastallaigor/vue-image-kit\"\u003e\u003cimg src=\"https://img.shields.io/circleci/build/github/guastallaigor/vue-image-kit/master?label=circleci\u0026logo=circleci\" alt=\"Build\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://codecov.io/gh/guastallaigor/vue-image-kit\"\u003e\u003cimg src=\"https://codecov.io/gh/guastallaigor/vue-image-kit/branch/master/graph/badge.svg\" alt=\"Code Coverage\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/vue-image-kit\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vue-image-kit.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://github.com/guastallaigor/vue-image-kit/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/vue-image-kit.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e\n    \u003ca href=\"http://standardjs.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/code%20style-standard-brightgreen.svg\" alt=\"Style standard\"\u003e\u003c/a\u003e\n    \u003ca href=\"https://app.netlify.com/sites/vue-image-kit/deploys\"\u003e\u003cimg src=\"https://api.netlify.com/api/v1/badges/6b76a9c5-e99e-4f34-88d9-aac5b7cc4219/deploy-status\" alt=\"Netlify Status\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e **Note:**\n\u003e This is an unofficial project.\n\u003e I do not work or am I affiliated with Image Kit\n\n## Demo\n\n[![Edit Checkbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-image-kit-keeh1)\n\n## Storybook\n\nGo to https://vue-image-kit.netlify.app\n\n## How does it work\n\nThis component uses the [Image Kit Real-time URL-based image transformation](https://imagekit.io/features/image-resize-smart-crop-responsive-dpr-client-hints), so you will need to have your images over [Image Kit](https://imagekit.io/) for it to work\n\nFor more informations about [Image Kit](https://imagekit.io/), consult their website\n\n## How to install\n\n### npm\n\n```bash\n$ npm install vue-image-kit --save\n```\n\n### yarn (recommended)\n\n```bash\n$ yarn add vue-image-kit\n```\n\n## Quick start\n\n### Vue.js\n\nYou can import in your `main.js` file\n\n```js\nimport Vue from \"vue\";\nimport VueImageKit from \"vue-image-kit\";\n\nVue.use(VueImageKit);\n```\n\nOr locally in any component\n\n```js\nimport { VueImageKit } from \"vue-image-kit\";\n// In v0.2+ you don't need the brackets above\n\nexport default {\n  components: {\n    VueImageKit,\n  },\n};\n```\n\n### Nuxt.js\n\nYou can import as a Nuxt.js plugin\n\n`~/plugins/vue-image-kit.js`\n\n```js\nimport Vue from \"vue\";\nimport VueImageKit from \"vue-image-kit\";\n\nVue.use(VueImageKit);\n```\n\nand then import it in your `nuxt.config.js` file\n\n```js\nplugins: [{ src: \"~/plugins/vue-image-kit\", mode: \"client\" }];\n```\n\n## Basic usage\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-image-kit\n    hash=\"6xhf1gnexgdgk\"\n    src=\"lion_BllLvaqVn.jpg\"\n    :width=\"1400\"\n    :height=\"800\"\n    alt=\"Lion image\"\n  /\u003e\n\u003c/template\u003e\n```\n\n## Props\n\n| Property name   | Type    | Default         | Required | Description                                                                                                                                                                      |\n| --------------- | ------- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| hash            | String  | null            | true     | Images hash. Example: Take this image -\u003e https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the hash is '6xhf1gnexgdgk'                                                    |\n| src             | String  | null            | true     | Images source. Example: Take this image -\u003e https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the source is 'lion_BllLvaqVn.jpg'                                           |\n| placeholder     | String  | ''              | false    | Images placeholder. Here you can pass a link                                                                                                                                     |\n| backgroundColor | String  | ''              | false    | Background color of the images placeholder                                                                                                                                       |\n| srcset          | Array   | [320, 480, 800] | false    | Array of numbers that will define the images srcset attribute. Each number correspond to one of the images width                                                                 |\n| sizes           | Array   | []              | false    | Array of numbers that will define the images sizes attribute. Each number correspond to one of the images max-width. Empty by default, which gets each of the images srcset prop |\n| defaultSize     | Number  | 1080            | true     | Images default size. Must be larger than the largest srcset and sizes                                                                                                            |\n| customTransform | String  | ''              | false    | Use this to append any extra image kit transform that you want                                                                                                                   |\n| width           | Number  | null            | false    | Images width. Width number in pixels. It will be set with inline style                                                                                                           |\n| height          | Number  | null            | false    | Images height. Height number in pixels. It will be set with inline style                                                                                                         |\n| alt             | String  | ''              | false    | Images alt attribute                                                                                                                                                             |\n| lazyLoad        | Boolean | true            | false    | If you don't want to use the built in lazy load, you can set this to false, then the image will not be lazy loaded, and you can setup your own lazy load                         |\n\n## Development\n\n[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://github.com/guastallaigor/vue-image-kit/issues)\n\n\u003e **Note**: Contributions are very welcomed, however is very important to open a new issue using the issue template **before** you start working on anything, so we can discuss it before hand\n\nFork the project and enter this commands in your terminal\n\n```sh\ngit clone https://github.com/YOUR_GITHUB_USERNAME/vue-image-kit.git\ncd vue-image-kit\nyarn\n```\n\n### Storybook\n\nFor visual testing, this project contains storybook which you can run by doing the next command\n\n```sh\n$ yarn storybook\n```\n\n### Jest\n\nBefore making the PR, if you changed something that needs to be tested, please make the tests inside the `tests/unit` folder\n\nTo run the tests, you can use the next command\n\n```sh\n$ yarn test:unit\n```\n\n### Commitlint\n\nThis project follows the [commitlint](https://github.com/conventional-changelog/commitlint) guidelines, with minor changes\n\nYou can commit using `npm run commit` to help you with that\n\nThere's a `pre-push` hook that runs all the unit tests before you can push it\n\nIf an error occurs, you can use the `npm run commit:retry` command that runs the previous `npm run commit` that you already filled\n\n[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/C1C63QCB8)\n\n## License\n\nMIT © [guastallaigor](https://github.com/guastallaigor/vue-image-kit/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fvue-image-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fguastallaigor%2Fvue-image-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fguastallaigor%2Fvue-image-kit/lists"}