Vue Image Kit
Vue.js Image Kit Component with Lazy Load built in and Responsive Images
The inspiration comes from this and a talk from @derevandal in @femug
Note: This is an unofficial project. I do not work or am I affiliated with Image Kit
Demo
Storybook
Go to https://vue-image-kit.netlify.app
How does it work
This component uses the Image Kit Real-time URL-based image transformation, so you will need to have your images over Image Kit for it to work
For more informations about Image Kit, consult their website
How to install
npm
$ npm install vue-image-kit --save
yarn (recommended)
$ yarn add vue-image-kit
Quick start
Vue.js
You can import in your main.js file
import Vue from "vue";
import VueImageKit from "vue-image-kit";
Vue.use(VueImageKit);
Or locally in any component
import { VueImageKit } from "vue-image-kit";
// In v0.2+ you don't need the brackets above
export default {
components: {
VueImageKit,
},
};
Nuxt.js
You can import as a Nuxt.js plugin
~/plugins/vue-image-kit.js
import Vue from "vue";
import VueImageKit from "vue-image-kit";
Vue.use(VueImageKit);
and then import it in your nuxt.config.js file
plugins: [{ src: "~/plugins/vue-image-kit", mode: "client" }];
Basic usage
<template>
<vue-image-kit
hash="6xhf1gnexgdgk"
src="lion_BllLvaqVn.jpg"
:width="1400"
:height="800"
alt="Lion image"
/>
</template>
Props
| Property name | Type | Default | Required | Description |
|---|---|---|---|---|
| hash | String | null | true | Images hash. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the hash is '6xhf1gnexgdgk' |
| src | String | null | true | Images source. Example: Take this image -> https://ik.imagekit.io/6xhf1gnexgdgk/lion_BllLvaqVn.jpg, the source is 'lion_BllLvaqVn.jpg' |
| placeholder | String | '' | false | Images placeholder. Here you can pass a link |
| backgroundColor | String | '' | false | Background color of the images placeholder |
| 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 |
| 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 |
| defaultSize | Number | 1080 | true | Images default size. Must be larger than the largest srcset and sizes |
| customTransform | String | '' | false | Use this to append any extra image kit transform that you want |
| width | Number | null | false | Images width. Width number in pixels. It will be set with inline style |
| height | Number | null | false | Images height. Height number in pixels. It will be set with inline style |
| alt | String | '' | false | Images alt attribute |
| 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 |
Development
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
Fork the project and enter this commands in your terminal
git clone https://github.com/YOUR_GITHUB_USERNAME/vue-image-kit.git
cd vue-image-kit
yarn
Storybook
For visual testing, this project contains storybook which you can run by doing the next command
$ yarn storybook
Jest
Before making the PR, if you changed something that needs to be tested, please make the tests inside the tests/unit folder
To run the tests, you can use the next command
$ yarn test:unit
Commitlint
This project follows the commitlint guidelines, with minor changes
You can commit using npm run commit to help you with that
There's a pre-push hook that runs all the unit tests before you can push it
If an error occurs, you can use the npm run commit:retry command that runs the previous npm run commit that you already filled
License
MIT © guastallaigor
2 Aug 13, 2018
107 Nov 16, 2022
0 Mar 19, 2021
67 Nov 24, 2022
61 Nov 19, 2022
56 Sep 9, 2022
5 Sep 25, 2022
2 Feb 8, 2022
7 Oct 29, 2022
91 Nov 18, 2021
99 Oct 27, 2022
1 Jan 4, 2022
25 Aug 11, 2021
63 Jul 19, 2022
4 Nov 15, 2022
0 Mar 29, 2020
57 Dec 22, 2022
0 Oct 21, 2021
37 Nov 14, 2022
