{"id":12407,"library":"vue-blurhash","title":"Vue Blurhash Components","description":"The `vue-blurhash` package provides a set of Vue 2 components designed to implement Blurhash image placeholders. It allows developers to display a compact, low-resolution representation of an image while the full-resolution image loads, enhancing the perceived performance and user experience of web applications. The library offers two primary components: `` for a complete image loading solution including an optional fade transition, and `` for generating only the Blurhash placeholder on a canvas, enabling custom image loading logic. As of its current stable version 0.1.4, it specifically targets Vue.js 2.0+ environments. Its release cadence appears infrequent, typical for a specialized utility library tied to an older major framework version. A key differentiator is its straightforward integration as a Vue plugin, simplifying the process of adding Blurhash functionality without extensive manual implementation of the `blurhash` algorithm itself.","status":"maintenance","version":"0.1.4","language":"javascript","source_language":"en","source_url":"https://github.com/damienroche/vue-blurhash","tags":["javascript","vue2","blurash","image","placeholder","blur","hash"],"install":[{"cmd":"npm install vue-blurhash","lang":"bash","label":"npm"},{"cmd":"yarn add vue-blurhash","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-blurhash","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core algorithm for encoding and decoding blurhashes, required for component functionality.","package":"blurhash","optional":false}],"imports":[{"note":"Used for plugin registration with `Vue.use()`. The CommonJS `require` syntax is typically not used for frontend Vue component libraries.","wrong":"const VueBlurHash = require('vue-blurhash')","symbol":"VueBlurHash","correct":"import VueBlurHash from 'vue-blurhash'"},{"note":"This is a named export for the canvas-only component. Do not use a default import.","wrong":"import BlurHashCanvas from 'vue-blurhash'","symbol":"BlurHashCanvas","correct":"import { BlurHashCanvas } from 'vue-blurhash'"},{"note":"Required for the default fade transition effect when the full image loads in ``.","symbol":"CSS Stylesheet","correct":"import 'vue-blurhash/dist/vue-blurhash.css'"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueBlurHash from 'vue-blurhash';\nimport 'vue-blurhash/dist/vue-blurhash.css'; // For fade transition effect\n\nVue.use(VueBlurHash);\n\nnew Vue({\n el: '#app',\n template: `\n
\n

Image with Blurhash Placeholder

\n \n

Canvas-only Placeholder

\n \n
\n `,\n});","lang":"javascript","description":"This quickstart demonstrates how to register `vue-blurhash` as a Vue 2 plugin, import its necessary CSS, and then utilize both the `` component for a complete image loading experience and the `` for just displaying the blurhash placeholder."},"warnings":[{"fix":"For Vue 3, consider using a different Blurhash library or implementing the functionality manually tailored for Vue 3's composition API or component structure.","message":"This library is explicitly designed for Vue 2.x applications and is not compatible with Vue 3. Attempting to use it in a Vue 3 project will result in runtime errors due to fundamental API changes between Vue major versions.","severity":"breaking","affected_versions":"All versions"},{"fix":"Ensure you install the `blurhash` package in your project using `npm install blurhash` or `yarn add blurhash`.","message":"The `blurhash` package is listed as a peer dependency, meaning it must be manually installed alongside `vue-blurhash`. The component functionality relies directly on this core `blurhash` library at runtime.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Add `import 'vue-blurhash/dist/vue-blurhash.css'` to your application's entry point or a relevant component file where the styles are needed.","message":"The fade-in transition effect for the loaded image, demonstrated in the `` component, requires the explicit import of the provided CSS file: `import 'vue-blurhash/dist/vue-blurhash.css'`. Without this import, the placeholder will simply disappear when the image loads, without a smooth transition.","severity":"gotcha","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `Vue.use(VueBlurHash)` to your application's entry point before creating your main Vue instance.","cause":"The `vue-blurhash` plugin has not been registered with the Vue instance using `Vue.use()`.","error":"[Vue warn]: Unknown custom element: - did you register the component correctly?"},{"fix":"Install the `blurhash` package: `npm install blurhash` or `yarn add blurhash`.","cause":"The `blurhash` peer dependency is missing from the project, preventing the library from decoding the hash.","error":"TypeError: Cannot read properties of undefined (reading 'decode') or TypeError: blurhash__WEBPACK_IMPORTED_MODULE_2__.decode is not a function"},{"fix":"Add `import 'vue-blurhash/dist/vue-blurhash.css'` to your application's main JavaScript file or a suitable style entry point.","cause":"The required CSS for the fade transition (`vue-blurhash/dist/vue-blurhash.css`) has not been imported into your application.","error":"The placeholder image disappears abruptly without a fade-in effect when the actual image loads."}],"ecosystem":"npm"}