Weekly Vue.js News - #54 - Create a custom directive
I launched the new version of my portfolio website which is based on Nuxt 3. It still has some issues as Nuxt 3 has no stable release yet.
Have a great week ☀️
Vue Tip: Create a custom directive
In addition to the default set of directives like
v-show, you can also register your own custom directives. For this example, let's look at how you can create a
v-theme directive that applies a specific style to an element of our template.
Custom directives should be used for reusing logic that involves low-level DOM access on plain elements.
You can define the custom directive inside any Vue component:
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:
At this point, you have created a custom directive that you can use in your Vue.js application.
Check the official documentation for more information.
Curated Vue Content
📕 Building Pinia Stores from Composition API
👉🏻 Amazing article by Abdelrahman
👉🏻 Pinia 🍍 has a nice trick in its API that allows you to combine your own composition functions along with 3rd party ones into your Pinia stores
📕 Vue Composition API Inspector
👉🏻 A peek under the hood of Vue compilation.
👉🏻 See how Vue interprets TypeScript.
👉🏻 Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild.
👉🏻 With TypeScript support.
👉🏻 Powered by unplugin.
cause property indicates the specific original cause of an error.
It is used when catching and re-throwing an error with a more-specific or useful error message in order to still have access to the the original error.
It is sometimes useful to catch an error and re-throw it with a new message. In this case you should pass the original error into the constructor for the new
Error, as shown:
Curated Web Development Content
👉🏻 Event Loop
👉🏻 and more...
📕 3 Things We Learned When Switching to TypeScript
👉🏻 Three lessons they learned along the way.
📕 How Stack Overflow is leveling up its unit testing game
👉🏻 The team neglected unit tests for a long time because their code base made them difficult.
👉🏻 But now they're putting in the work to change that. Here's why.
👉🏻 "The purpose of this write-up is to show how powerful flexbox and grid are and to highlight those interesting use-cases for them. There might be a few bits that are focused on subtle UI details which I like very much."
👉🏻 This beginner's guide will teach you some Object-Oriented Programming concepts like Key-Value Pairs, Dot Notation, and Constructors.
👉🏻 iles is a static-site generator that provides great support for partial hydration.
👉🏻 Froebel is a strictly typed TypeScript utility library.
👉🏻 It contains TypeScript helper functions and utilities from various projects.
👉🏻 Froebel runs in Deno, Node.js, and the browser.