Home > Blockchain >  How to register custom directive in vue 3 <script setup>
How to register custom directive in vue 3 <script setup>

Time:09-22

I can't find this in the docs. There is only info on registering it global on the app

Is it possible to register a custom scoped directive with the <script setup>?

If I use regular script I have something like this:

<script>
import { defineComponent } from 'vue'
import { customDirective } from './customDirective';

export default defineComponent({
  directives: { customDirective }
})
</script>

Now with <script setup>:

<script setup>
// how to register this
import { customDirective } from './customDirective';
</script>

If I leave it like that, I get the error in the console

Failed to resolve directive

Any help is appreciated

CodePudding user response:

You need to resolve it with the v prefix.

<script setup>
import { customDirective as vCustomDirective } from './customDirective';
</script>
  • Related