Javascript is required
Weekly Vue News Logo Weekly Vue News
a { color: #42B883; text-decoration: none; } a:hover { color: #33a06f } .overflow-auto { overflow: auto } p {margin: 5px 0px} .ct-36e85c{color:#6A9955} .ct-8f9f80{color:#C8C8C8} .ct-ae5419{color:#808080} .ct-78eef5{color:#9CDCFE} .ct-0d8ec4{color:#B5CEA8} .ct-c2bbeb{color:#CE9178} .ct-c746e8{color:#DCDCAA} .ct-b1c360{color:#4FC1FF} .ct-220622{color:#569CD6} .ct-e8c10a{color:#C586C0} .ct-f3f815{color:#D4D4D4} FOLLOW_UP_PLACEHOLDER

#title Weekly Vue News #81 - Re-Rendering Vue Routes When Path Parameters Change #preview Ready for your weekly Vue & Nuxt dose?

View and discuss online, Weekly Vue News #81

Re-Rendering Vue Routes When Path Parameters Change

Hi πŸ‘‹

I had to switch from Cloudinary to TwicPics as I reached the free limit of Cloudinary.

The paid plan for Cloudinary would be 99€/month 🀯 Therefore, I moved all images to an AWS S3 bucket and let them process them via TwicPics. It costs me only 20€/month for 40GB of CDN bandwidth!

I'm busy producing Vue & Nuxt tips for upcoming newsletter issues.

Unfortunately, I also have a full backlog of blog post articles I would like to write...

Too many ideas, too little time πŸ˜₯

Have a lovely week β˜€οΈ


To support me:

Vue Tip: Re-Rendering Vue Routes When Path Parameters Change

In Vue applications, we use Vue Router to define routes and map URLs to components. These components are rendered and updated whenever the URL changes.

A typical use case is a dynamic route pattern with params: /users/:id. It allows you to specify a parameter in the URL. The :id in this route pattern is a placeholder for a dynamic value, which can change based on the user's actions. Typically you will trigger a backend endpoint with the given id to fetch user details.

Let's take a look at an example:

The demo code of this article is interactively available in the following StackBlitz project:

⚑ Open Demo
UserDetails.vue
1<script setup>
2import { ref, onMounted } from 'vue'
3import { useRoute, useRouter } from 'vue-router'
4import UserId from '@/components/UserId.vue'
5import { getUserDetails } from '../api/userApi.js'
6
7const route = useRoute()
8const router = useRouter()
9
10const loading = ref(false)
11const details = ref(null)
12
13async function fetchDetails(id) {
14 loading.value = true
15 try {
16 details.value = await getUserDetails(id)
17 } catch (error) {
18 console.error('Failed to fetch details', error)
19 details.value = 'Error'
20 } finally {
21 loading.value = false
22 }
23}
24
25function navigateToNextUser() {
26 const nextId = Number(route.params.id) + 1
27 router.push({ name: 'UserDetails', params: { id: nextId } })
28}
29
30onMounted(async () => {
31 console.log('UserDetails mounted')
32 fetchDetails(route.params.id)
33})
34</script>
35
36<template>
37 <h2>User Details</h2>
38 <div>
39 <span>ID: {{ route.params.id }}</span>
40 <span v-if="loading">Loading details ...</span>
41 <span v-else>Details: {{ details }}</span>
42 <button @click="navigateToNextUser">Next User</button>
43 </div>
44</template>

This component uses the onMounted lifecycle hook to fetch user details when the component is mounted. The user's ID is read via route.params.id from the useRoute composable.

So far, everything works fine and the user details are visible and they get updated if we update the route path manually by changing /users/1 to /users/2.

But our component contains a button that triggers a programmatic route update using router.push.

Programmatically altering the path does not trigger the re-rendering of the view. As a result, the mounted() hooks do not fire, and the nested components do not reload, leading to unexpected behavior.

Solution 1: Watcher

The simplest solution is to add a watcher that fetches the details if the route params have changed:

UserDetails.vue
1<script setup>
2// ...
3
4watch(
5 () => route.params.id,
6 (newId, oldId) => {
7 fetchDetails(route.params.id)
8 }
9)
10</script>

Solution 2: Route Guard

Another solution is the beforeRouteUpdate route guard:

UserDetails.vue
1<script setup>
2// ...
3
4onBeforeRouteUpdate(async (to, from) => {
5 if (to.params.id !== from.params.id) {
6 fetchDetails(route.params.id)
7 }
8})
9</script>

Of course, you can also use the route guard with Options API.

It adds a navigation guard that triggers whenever the current location is about to be updated. Similar to beforeRouteUpdate but can be used in any component. The guard is removed when the component is unmounted.

Difference Between Solution 1 & 2

There is a big difference between using watch and beforeRouteUpdate:

The route guard is called before the value of the route object actually changes. The watcher is called after the value of route has changed.

Using the beforeRouteUpdate navigation guard, you can determine whether or not you want to prevent the route from changing or go to a different route entirely.

Curated Vue ContentπŸ“• Volar: A New Beginning
πŸ‘‰πŸ» Volar, previously the official Vue VSCode extension, is now an embedded language tooling framework.
πŸ‘‰πŸ» It can process any file format that involves embedded languages.
blog.vuejs.org
πŸ“• How to create a reporting app with Vue 3 and Composition API
πŸ‘‰πŸ» In this article, you'll learn how to create a reporting app with Vue 3 and Composition API.
πŸ‘‰πŸ» Flexmonster Pivot Table & Charts and Highcharts libraries are used.
www.geeksforgeeks.org
πŸ“• Vue Real Life Transitions and Micro-Interactions

πŸ‘‰πŸ» In this article, Fotis investigates different options to create transitions and micro-interactions.

fadamakis.com
πŸ“Ή Vue: What to Expect in 2023
πŸ‘‰πŸ» Evan You tells us what to expect in 2023 from Vue.js.
πŸ‘‰πŸ» He is the creator of the JavaScript framework Vue.js and the frontend build tool Vite.
www.youtube.com
πŸ› οΈ ScrollyVideo.js
πŸ‘‰πŸ» Responsive scrollable videos without obscure video encoding requirements.
πŸ‘‰πŸ» Compatible with React, Svelte, Vue, or just plain HTML.
scrollyvideo.js.org
πŸ“• Devtools in Chrome 110

πŸ‘‰πŸ» Adds enhanced support when inspecting Vue source

developer.chrome.com
Quote of the weekCurated Web Development ContentπŸ“• A beginner’s guide to Chrome tracing
πŸ‘‰πŸ» Chrome tracing lets you record a performance trace that captures low-level details of what the browser is doing.
πŸ‘‰πŸ» This post is a short guide on how to use this tool, from a web developer’s point of view.
nolanlawson.com
πŸ“• Software Security Report Finds JavaScript Applications Have Fewer Flaws Than Java and .NET

πŸ‘‰πŸ» Veracode’s State of Software Security report for 2023 found that JavaScript Applications Have Fewer Security Flaws Than Java and .NET Applications.

www.infoq.com
πŸ› οΈ magic-regexp
πŸ‘‰πŸ» A compiled-away, type-safe, readable RegExp alternative.
πŸ‘‰πŸ» Watch it in action
regexp.dev
πŸ› οΈ Zero to Nix

πŸ‘‰πŸ» Nix is a tool that builds packages in isolation from each other to ensure that they are reproducible and don't have undeclared dependencies.

zero-to-nix.com
Comments? Join the discussion about this issue here.

Until next week,

Michael Hoffmann (Curator) Share via Facebook Twitter LinkedIn Unsubscribe from this newsletter
Holzapfelkreuther Str. 19, 81375 Munich, Germany
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 weekly-vue.news. All rights reserved.