I'm brand new to Vue and very inexperienced with custom directives. I'm attempting something basic, but it doesn't seem to be working correctly. Can someone please help me figure out what's wrong? Thank you in advance! I have created two directives: one in main.ts:
app.directive('display', {
beforeMount: (el, binding) => {
el.style.display = binding.value
}
})
The other one is in App.vue:
app.directive('color', {
beforeMount: el => {
el.style.color = 'red'
}
})
I am trying to use the directives like this, but nothing is happening:
<h1
class="text-4xl font-semibold my-10 text-center capitalize text-black dark:text-white"
v-display:none
v-color
>
If I need to register them, I am unsure of how to do so. In my Component FAQ (where I am implementing the directives), I tried this:
directives: {
color: {
}
}