We defined the custom directive as an object that contains the lifecycle hooks as a Vue component. The element the directive is bound to is available as the first argument of the lifecycle hooks.
<script setup>, any camelCase variable that starts with the
v prefix can be used as a custom directive.
Custom directives should only be used when the desired functionality can only be achieved via direct DOM manipulation. When possible, prefer declarative templating using built-in directives such as
v-bind because they are more efficient and server-rendering friendly.
Now let’s extend our directive by adding an argument that defines which theme should be applied: