Weekly Vue News — #71 — Dynamically Add & Remove Route While App Is Running

5 min readDec 20, 2022

Hi 👋

I’m still busy working on my video content but I found the time to publish a new blog post about a table of contents component for Nuxt 3 and Nuxt Content. You can find the link below.

I’m also planning to rewrite my GitHub Traffic Viewer with Nuxt 3 & VueFire.

I put a lot of effort into this weekly newsletter, and you can support my work in the following ways:

Reply to this mail with a short testimonial about why you love this newsletter. I will reference it at weekly-vue.news.
Share weekly-vue.news on social media and help me spread the word.
Buy me a coffee ☺️

Have a great week ☀️

Vue Tip: Dynamically Add & Remove Route While App Is Running

Adding routes to your router is usually done via the routes option, but in some situations, you might want to add or remove routes while the application is already running.

Vue Router provides two functions for dynamic routing: router.addRoute() and router.removeRoute()

Adding Routes

addRouteonly registers a new route. If you want to navigate to the newly added route, you need to manually navigate with router.push() or router.replace().

It’s also possible to add nested routes:

Removing Routes

There are three ways to remove an existing route:

Use router.removeRoute():

Use the callback returned by router.addRoute():

Add a route with a conflicting name. If you try to add a route with the same name as an existing route, it will remove the first route and add the new route:

StackBlitz Demo

Check the official documentation for more details about this feature.

Curated Vue Content

📕 Create a Table of Contents With Active States in Nuxt 3 — mokkapps.de

In this article, I will show you how to create a sticky table of contents sidebar with an active state based on the current scroll position using Nuxt 3, Nuxt Content and Intersection Observer.

📕 Migrating from Nuxt 2 to Nuxt 3

debbie.codes

👉🏻 Debbie shares with you the steps she took to migrate her site from Nuxt 2 to Nuxt 3.

📕 Nuxt 3 + useFetch = Reactive Vue at its best 🔥

medium.com

👉🏻 Vue utilizes reactive programming.

👉🏻 By using useFetch provided by Nuxt 3 we can get the most out of this programming paradigm and reduce code complexity.

📕 Event Bus Pattern in Nuxt 3 with Full TypeScript Support

dev.to

👉🏻 Using an Event Bus is an easy way to communicate different parts of our application.

👉🏻 In this article, Isreal learns us how to implement it with Nuxt 3 and TypeScript.

Quote of the Week

JavaScript Tip: Measuring the perfomance of functions

JavaScript Tip: Measuring the performance of functions

We can use the Performance Web API to check the execution time of our code.performance.now returns the value of time in…

youtube.com

We can use the Performance Web API to check the execution time of our code.

The performance.now function returns the value of time in milliseconds.

The returned value represents the time elapsed since the time origin. The time origin is a standard time which is considered to be the beginning of the current document’s lifetime.

Curated Web Development Content

📕 35 Misconceptions about date and time

www.meziantou.net

👉🏻 Everybody uses the same calendar.

👉🏻 1 year equals 12 months.

👉🏻 GMT is the same as UTC.

👉🏻 Time zone offsets are always integer numbers of hours.

👉🏻 Weeks start on Monday. And more.

📕 Advanced TypeScript

angularexperts.io

Get familiar with some of Typescript’s greatest advanced features:

👉🏻 Union and intersection types

👉🏻 Keyof

👉🏻 Typeof

👉🏻 Conditional types

👉🏻 Utility types

👉🏻 Infer type

👉🏻 Mapped types

📕 Converting the TypeScript Codebase to Modules

github.com

👉🏻 The TypeScript team recently migrated the TypeScript codebase from legacy namespaces to ECMAScript modules.

👉🏻 It improved compiler performance by 10–25%.

📕 Data Structures In Frontend JavaScript In The Real World

profy.dev

👉🏻 You will see examples that you might recognize from your own code or that can use in your projects or on the job.

📕 The Perfect Commit

simonwillison.net

👉🏻 The perfect commit contains the implementation, tests to show the implementation works, updated documentation, and a link to an issue thread providing further context.