Vue-blur-loader

A Vue.js component to load images with a blur animation like the site Medium

Installation

npm install vue-blur-loader --save

#or

yarn add vue-blur-loader

Usage

import BlurLoader from 'vue-blur-loader'

export default {
  ...,
  components: { BlurLoader }
}

<BlurLoader src='myImagePath.jpg' smallSrc='mySmallImagePath.jpg' />

src and smallSrc can either be an url or a local path or even require with your module bundler

<BlurLoader :src='require("myImagePath.jpg")' :smallSrc='require("mySmallImagePath.jpg")' />

You can also provide an element which will be showing before the small image load if the internet connexion is really slow (like a loader gif)

<BlurLoader src='myImagePath.jpg' smallSrc='mySmallImagePath.jpg'>
  <img src='myLoader.gif'>
</BlurLoader>