Skip to content

Vue.js Image Kit Component with Lazy Load built in and Responsive Images

License

Notifications You must be signed in to change notification settings

guastallaigor/vue-image-kit

Repository files navigation

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

Build Code Coverage Total Downloads Latest Release Style standard Netlify Status

Note: This is an unofficial project. I do not work or am I affiliated with Image Kit

Demo

Edit Checkbox

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

contributions welcome

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

ko-fi

License

MIT © guastallaigor