How to register a custom directive in Vue

Question

In VueJs Docs, https://vuejs.org/guide/custom-directive.html I can easily create a custom directive using the native Vue.directive method

My question is how would you be able to create a custom directive inside an export default {}

the same as when registering a component or prop:

components: {
   Component1, Component2
},
methods: {
   method1() {
    // code here
   }
},

Answer 1

Here is a basical example about how to use directive in a component (*.vue file):

component/snippet.vue

<template>

    <div id="snippet">
        <code v-snippet>
            {{snippet.code}}
        </code>
    </div>

</template>


<script>

import snippet from '../directive/snippet';


export default {
    directives: {
        snippet: snippet
    }
}

</script>

directive/snippet.js

export default {

    update: function (el) {

        console.log('update');
    }
}

For further information, You can check https://v2.vuejs.org/v2/guide/custom-directive.html (the Intro part).

Answer 2

You can create a custom directive in this way

export default {
  components: {
    Component1, Component2
  },
  methods: {
    method1() {
      // code here
    }
  },
  directives: {
    // create a directive named 'elementLog'
    elementLog: {
      inserted: function (el) {
        console.log(el)
      },
    },
  },
}

In the template write the name of the directive in kebab-case format and add 'v-'

<template>
  <div>
    <span v-element-log>One</span>
    <span v-element-log>Two</span>
  </div>
</template>