Weekly Vue.js News - #54 - Create a custom directive
Hi ๐
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.
In this issue, I will show you how you can create a custom directive in Vue and how to rethrow JavaScript errors with a cause. Additionally, you get curated articles about Vue and web development.
Have a great week โ๏ธ
Vue Tip: Create a custom directive
In addition to the default set of directives like v-model or 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.
In <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.
JavaScript Tip: Rethrow an error with cause
The 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
โจโป๏ธ JavaScript Visualized
An awesome series about JavaScript. It includes articles with nice visualization about:
๐๐ป Event Loop
๐๐ป Hoisting
๐๐ป Scope
๐๐ป Inheritance
๐๐ป and more...
๐ 3 Things We Learned When Switching to TypeScript
๐๐ป Trivago recently migrated its core website, along with over 50 other domains, from a PHP & JavaScript setup to Next.js & 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."
๐ Learn all about the JavaScript object data structure
๐๐ป 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.
๐๐ป iles aims to combine the development experience of building a site with Vue while effortlessly shipping a zero JavaScript site.
๐๐ป 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.
Quote of the Week
