[Vuejs]-How do you globally add directives from an external file to Vue 3?

by

3👍

Create a directives file called /src/directives/directives.js. I have placed my file into a directives folder to keep it clean.

// focus text input on mounted
const focus = {mounted: (el) => el.focus()}
export { focus }

In the main.js file import your directive and globally register it to your app.

import { createApp } from 'vue'
import { focus } from "./directives/directives.js"

const app = createApp(App)
app.directive("focus", focus)
.mount('#app')

Finally, in your component use the directive.

<input type="text" v-focus>

👤mbokil

1👍

Simply rename the variable name to vFocus !

Here another example with Vue + Typescipt

create a directive file eg. ‘HelloDirective.ts’

export const vSayHello = { mounted: (el: Element) => (el.innerHTML = 'hello') }

import into your component with

import { vSayHello } from '@/directives/HelloDirective'

add directive into your html template

<span v-say-hello>old text</span>
👤user17587831

Leave a comment