Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork378
Uh oh!
There was an error while loading.Please reload this page.
Uh oh!
There was an error while loading.Please reload this page.
-
Is there a guideline on how to auto-import custom directives (Vue 3, using Vite)? In the config, I have set Anything else I missed in the config? How should the directive be structured in the file? |
BetaWas this translation helpful?Give feedback.
All reactions
👍 1
Replies: 1 comment
-
@go4cas It does, but you need to write a custom resolver. Instead of: unpluginVueComponents({directives:true,dirs:["./src/components","./src/directives"],}), Use something like: import{kebabCase}from"lodash-es";importfsfrom"node:fs/promises";unpluginVueComponents({dirs:["./src/components"],resolvers:[{type:"directive",resolve:async(name)=>{// Convert the filename so that it's exactly the same on disk and// when used.constfilename=`v-${kebabCase(name)}.js`;// Check that the file exists, otherwise it would create imports// pointing nowhere for all directives that don't exist.return(awaitfs.exists(`src/directives/${filename}`)) ?// The path has to be absolute (or aliased).`@directives/${filename}` :null;},},],}), The directive files then have to each export the directive as the default export: exportdefault{mounted(){// …},updated(){// …},unmounted(){// …},}; |
BetaWas this translation helpful?Give feedback.
All reactions
This discussion was converted from issue #741 on July 18, 2025 00:53.