Weekly Vue News - #71 - Dynamically Add & Remove Route While App Is Running
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
Image created with CodeSnap.dev
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 CodeSnap.dev
Removing Routes
There are three ways to remove an existing route:
- Use
router.removeRoute():
Image created with CodeSnap.dev
- Use the callback returned by
router.addRoute():
Image created with CodeSnap.dev
- 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 CodeSnap.dev
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 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 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.
Image created with CodeSnap.dev
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.
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 contains the implementation, tests to show the implementation works, updated documentation, and a link to an issue thread providing further context.
👉🏻 A command-line tool for keeping repositories clean.
👉🏻 It supports deletion of both local and remote branches and workflows with multiple release branches.
👉🏻 A tool to create beautiful icons for your projects, apps, or Raycast extensions with ease.
👉🏻 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 — neal.fun
👉🏻 Asteroid Launcher is a website that allows users to simulate how an asteroid might destroy any given locale.
