프로그래머가 원하는 기능을 할 수 있는 디렉티브를 만들 수 있다.

<template>
  <input type="text" v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      mounted(el) {  // el은 해당 디렉티브를 선언한 객체를 의미한다. 여기서는 위의 input 객체
        el.focus()  // focus 이벤트를 실행한다.
      }
    }
  }
}
</script>

위의 디렉티브는 input 요소가 마운트되자마자 그 쪽으로 포커스가 되도록 하는 디렉티브이다. directives 옵션 안에서 해당 요소를 el이라는 인자로 받아 사용할 수 있다.

만약 해당 디렉티브를 글로벌하게 사용하고 싶다면, main.js에 directive 메서드로 이용할 수 있다.

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

var app = createApp(App)
app.use(router)
**app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})**
app.mount('#app')