¿Cómo puedo registrar una directiva Vue para que esté disponible en todos mis componentes de mi aplicación Vue? estoy usando vue 2
Los documentos dicen que puede registrarse globalmente, pero ¿en qué parte de mi proyecto agrego esta Vue.directive(....)
src/directivas/TestMe.js
import Vue from 'vue' export default Vue.directive('test-me', { inserted(el) { el.style.backgroundColor = 'red' }, })src/components/SignInForm.vue
<template> <div> <code v-test-me> Hello World </code> </div> </template> </script>Conozco la forma actual de hacer esto haciendo lo siguiente. Sin embargo, no es práctico si planeo usar mi directiva en múltiples componentes y páginas de mi aplicación.
<template> <div> <code v-test-me> Hello World </code> </div> </template> <script> import TestMe from '../../directives/TestMe' export default { directives: { TestMe } } </script>Publicación actualizada basada en las respuestas a continuación.
Creé archivos diferentes para cada directiva y luego tengo un archivo index.js donde importo todas mis directivas. ¿Cómo puedo iniciar ese archivo index.js en la carpeta de directivas al comienzo de mi aplicación?
// src/directives/TestMe.js export default testMe = { inserted(el) { el.style.backgroundColor = 'red' }, } // src/directives/index.js import testMe from './TestMe' export default { install(Vue) { Vue.directive('test-me', testMe) // Vue.directive('other-directive', myOtherDirective) }, } // src/main.js import Vue from 'vue' import App from './App.vue' import ???? from './directives' const app = createApp(App) app.use(????)Tiene directivas globales... ¿de dónde viene ese nombre?
EDITAR: no leí que OP está usando Vue 2.
Para llamar a .use() , debe exportar el objeto con la función install(Vue)
Si desea la directiva como un archivo separado.
// src/directives/TestMe.js const testMe = { inserted(el) { el.style.backgroundColor = 'red' }, } export default testMeAquí es donde se registran todas las directivas. Puede importar archivos o simplemente definir sus directivas aquí.
// src/directives/index.js import testMe from './TestMe' // const myOtherDirective = { // ... // } export default { install (Vue) { Vue.directive('test-me', testMe) // Vue.directive('other-directive', myOtherDirective) } }Puede registrar las directivas globales en main.js con Vue.use
// src/main.js import Vue from 'vue' import App from './App.vue' import globalDirectives from './directives' Vue.use(globalDirectives) const app = new Vue({ router, store, render: h => h(App), }) app.$mount('#app')Puede registrar las directivas globales en main.js después de createApp
// src/main.js import Vue from 'vue' import App from './App.vue' import globalDirectives from './directives' const app = createApp(App) app.use(globalDirectives)