Vue directive to blur an element dynamically

v-blur

Vue directive to blur an element dynamically. Useful to partially hide elements, use it with a spinner when content is not ready among other things.

Install

$ npm install --save v-blur

$ yarn add v-blur

Binding value

The binding value can be a Boolean or an Object. If a Boolean is provided, the directive uses default values for opacity, filter and transition. To use a custom configuration, an object with these attributes plus isBlurred (To determine when to apply these styles) can be provided.

Binding object attributes

option	default	type
isBlurred	false	boolean
opacity	0.5	number
filter	'blur(1.5px)'	string
transition	'all .2s linear'	string

Use

import Vue from 'vue'
import vBlur from 'v-blur'

Vue.use(vBlur)

<script>
  export default {
      data () {
        return {
          isBlurred: true, // activate and deactivate blur directive example 1
          
          blurConfig: {
            isBlurred: false, // activate and deactivate blur directive example 2
            opacity: 0.3,
            filter: 'blur(1.2px)',
            transition: 'all .3s linear'
          }
        }
      }
    }
  };
</script>

<template>
  <!-- Example 1 using just a boolean (Uses default values) -->
  <div v-blur="isBlurred"></div>

  <!-- Example 2 using an object (Uses config values) -->
  <div v-blur="blurConfig"></div>
</template>

Example

GitHub