Skip to content

🌁 VueJS components using the blurhash algorithm (representation of a placeholder for an image)

Notifications You must be signed in to change notification settings

damienroche/vue-blurhash

Repository files navigation

vue-blurhash

Blurhash vuejs plugin

VueJS components using the blurhash algorithm

Installation

You need Vue.js version 2.0+

Install via npm

npm install vue-blurhash
yarn add vue-blurhash

Import and use

import Vue from 'vue'
import VueBlurHash from 'vue-blurhash'

// Import css if you want to use image fade transition
import 'vue-blurhash/dist/vue-blurhash.css'

...

Vue.use(VueBlurHash)
<template>
  <blur-hash-image
    width="400"
    height="300"
    hash="LdHfL}oJR$WBKnfi%3ofT0kCM{ay"
    src="https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80"
    alt="green lawn grass during daytime"
  />
</template>

Props

Name Type Default Description
height [Number, String] 128 Height of image
width [Number, String] 128 Width of image
punch [Number, String] 1 This value adjusts the contrast on the decoded image
src String null Image source url
srcset String null Image sourceset attribute
transitionDuration Number 500 Fade animation - Transition time (in ms)

Use Canvas only

Maybe you want to only draw the placeholder from the hash and implementing your own image displaying logic. You can do this from this way

import { BlurHashCanvas } from "vue-blurhash";
<template>
  <blur-hash-canvas
    :hash="hash"
    :width="width"
    :height="height"
    :punch="punch"
  />
</template>

About

🌁 VueJS components using the blurhash algorithm (representation of a placeholder for an image)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published