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

Question

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

Steven B. · Accepted Answer · 2022-02-03 14:29:25Z

13

You need to resolve it with the v prefix.

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

See the docs.

edited Feb 3, 2022 at 14:29

answered Sep 21, 2021 at 19:46

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

blockhead Over a year ago

Is there a link in the docs to this? OP says he couldn't find docs.

Steven B. Over a year ago

@blockhead see the updated answer with the link.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related