Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

Weekly Vue.js News - #54 - Create a custom directive

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

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:

Open Playground

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:

Open Playground

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.

🛠️ unplugin-auto-import

👉🏻 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 CSS behind Figma

👉🏻 "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.

🛠️ îles

👉🏻 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

👉🏻 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

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 All rights reserved.