Vue directive to blur an element dynamically

$ npm install --save v-blur

$ yarn add v-blur

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>