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

2. 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>