Skip to content

suryaadtmaja/nuxt-blurhash

Repository files navigation

Nuxt Blurhash

Demo

📖 Release Notes

this project based on https://github.com/damienroche/vue-blurhash

Setup

  1. Add nuxt-blurhash dependency to your project
yarn add nuxt-blurhash # or npm install nuxt-blurhash
  1. Add nuxt-blurhash to the modules section of nuxt.config.js
{
  modules: [
    // Simple usage
    'nuxt-blurhash'
  ]
}

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
transitionDuration Number 500 Fade animation - Transition time (in ms)

Simple usage

<template>
  <nuxt-blur-image
    width="400"
    height="300"
    src="https://images.unsplash.com/photo-1417325384643-aac51acc9e5d?q=75&fm=jpg&w=1080&fit=max"
    hash="LFC$yHwc8^$yIAS$%M%00KxukYIp"
    alt="A man drinking a coffee."
  />
</template>

Use Canvas only

<template>
  <nuxt-blurhash
    :hash="'LdHfL}oJR$WBKnfi%3ofT0kCM{ay'"
    :width="'340'"
    :height="'320'"
    :punch="punch"
  />
</template>