How to define and use directives on vue3 composition api with the new syntactic sugar in SFC <script setup>
format?
With options API it used to be like this
import click_outside from "@/directives/click-outside.js";
export default {
directives: {
"click-outside": click_outside,
},
...
}
click-outside.js
<script setup>
import {defineProps, onBeforeMount, onUnmounted, directive } from "vue";
const onBeforeMount = (el, binding) => {
...
};
const onUnmounted = (el) => {
...
};
</script>
I couldn't figure out the same counterpart code in composition API
Feature parity with regular script
SFC is achieved in 3 different ways.
props
argument from setup
and props
, emits
, expose
fields from component options are provided by using define...
helpers.
context
(only slots
and attrs
properties) argument from setup
is provided by using use...
helpers.
components
and directives
are indirectly provided by using imports of the same name.
The rest of features (e.g. name
property) are still provided by script
element that can coexist with script setup
.