{"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: `<blur-hash-image>` for a complete image loading solution including an optional fade transition, and `<blur-hash-canvas>` 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 `<blur-hash-image>`.","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    <div id=\"app\">\n      <h1>Image with Blurhash Placeholder</h1>\n      <blur-hash-image\n        width=\"400\"\n        height=\"300\"\n        hash=\"LdHfL}oJR$WBKnfi%3ofT0kCM{ay\"\n        src=\"https://images.unsplash.com/photo-1545910684-8e7c081be9b0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1867&q=80\"\n        alt=\"green lawn grass during daytime\"\n        transitionDuration=\"800\"\n      />\n      <h2>Canvas-only Placeholder</h2>\n      <blur-hash-canvas\n        hash=\"LdHfL}oJR$WBKnfi%3ofT0kCM{ay\"\n        width=\"200\"\n        height=\"150\"\n        punch=\"1.2\"\n      />\n    </div>\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 `<blur-hash-image>` component for a complete image loading experience and the `<blur-hash-canvas>` 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 `<blur-hash-image>` 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,"search_vec":"'0.1.4':91 '2':14 '2.0':96 'ad':131 'algorithm':141 'allow':23 'appear':101 'applic':52 'blur':148 'blurash':145 'blurhash':2,7,19,75,132,140 'cadenc':100 'canva':79 'compact':28 'complet':61 'compon':3,15,58 'current':88 'custom':81 'design':16 'develop':24 'differenti':118 'display':26 'enabl':80 'enhanc':43 'environ':97 'experi':49 'extens':135 'fade':68 'framework':114 'full':39 'full-resolut':38 'function':133 'generat':72 'hash':149 'imag':20,35,41,62,82,146 'implement':18,137 'includ':65 'infrequ':102 'integr':122 'javascript':143 'key':117 'librari':54,108 'load':42,63,83 'logic':84 'low':30 'low-resolut':29 'major':113 'manual':136 'offer':55 'older':112 'option':67 'packag':8 'perceiv':45 'perform':46 'placehold':21,76,147 'plugin':126 'primari':57 'process':129 'provid':9 'releas':99 'represent':32 'resolut':31,40 'set':11 'simplifi':127 'solut':64 'special':106 'specif':93 'stabl':89 'straightforward':121 'target':94 'tie':109 'transit':69 'two':56 'typic':103 'user':48 'util':107 'version':90,115 'vue':1,6,13,125 'vue-blurhash':5 'vue.js':95 'vue2':144 'web':51 'without':134","created_at":"2026-04-19T13:43:00.970737+00:00","updated_at":"2026-04-19T13:43:00.970737+00:00","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: <blur-hash-image> - 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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/damienroche/vue-blurhash","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-blurhash","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}