Javascript is required
Weekly Vue News Logo Weekly Vue News

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

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

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

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:

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

Image created with

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:

Image created with

Removing Routes

There are three ways to remove an existing route:

  • Use router.removeRoute():

Image created with

  • Use the callback returned by router.addRoute():

Image created with

  • 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:

Image created with

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 📕 Create a Table of Contents With Active States in Nuxt

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 3Nuxt Content and Intersection Observer.

📕 Migrating from Nuxt 2 to Nuxt 3

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

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

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

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

The 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.

Image created with

Curated Web Development Content

📕 35 Misconceptions about date and time

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

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

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

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

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

🛠️ git-delete-merged-branches

👉🏻 A command-line tool for keeping repositories clean.

👉🏻 It supports deletion of both local and remote branches and workflows with multiple release branches.

🛠️ Icon Maker by Raycast

👉🏻 A tool to create beautiful icons for your projects, apps, or Raycast extensions with ease.

🛠️ OverlayScrollbars

👉🏻 JS scrollbar plugin to replace native scrollbars

👉🏻 Provides custom styleable overlay scrollbars while keeping a native functionality and feel.

👉🏻 v2.0 is a full rewrite in TypeScript and smaller, too.

Time to relax and destroy something

🛠️ Simulate an Asteroid Impact in Your Hometown 🛠️ Simulate an Asteroid Impact in Your

👉🏻 Asteroid Launcher is a website that allows users to simulate how an asteroid might destroy any given locale.

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.