Using directives in the Options API

March 20, 2024

I'm reworking some old Vue 2 code into Vue 3 and wanted to move from vue-clickaway to VueUse's onClickOutside method. It even has a directive that can be used just like vue-clickaway, perfect! The only problem is that the docs all show the Composiiton API being used. How do I import the directive so that I can use it in a component template?

Initially I tried adding a setup() function and returning the directive, but in the end, it was much simpler:

<script>
import { vOnClickOutside } from '@vueuse/components'
 
export default {
    directives: {
        onClickOutside: vOnClickOutside
    },
    ...
}
<script>

Using directives in the Options API

Categories