N
Nuxt•2mo ago
christophFroe

Dynamic routes with [...slug].vue not keeping components alive

We have a dynamic project loading everything from an API. What happens if we change the URL 1) In the middleware we use defineNuxtRouteMiddleware to catch the new route 2) Then all components react on the route change and update themselves with the new data, everything would be perfect but then ... 3) When everything is finished, due to the route change the root component and all other components are new mounted and are re-rendered. It's working but I hope we can make it more efficient. Perhaps I don't understand the behavior of Nuxt correctly, so please correct me if I am wrong My ideas/questions: a) Is there a way to keep the components alive it's a SPA and should be the fastest in my opinion, instead of new mounting b) Or which hook should we use to update the data after everything was new mounted? c) .... Thanks a lot for all answers. Christoph
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @christophFroe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your frustration with components being remounted when navigating between dynamic routes. This is a common challenge in Nuxt applications with dynamic routing. Keeping Components Alive You can use the keepalive prop on the <NuxtPage> component to preserve component state between route changes: 
<template>
  <NuxtPage :keepalive="true" />
</template>
<template>
  <NuxtPage :keepalive="true" />
</template>
Alternatively, you can define this in your page component using definePageMeta: 
<script setup>
definePageMeta({
  keepalive: true
})
</script>
<script setup>
definePageMeta({
  keepalive: true
})
</script>
The keepalive prop works similarly to Vue's built-in <KeepAlive> component, preserving component state when switching between routes Docs > Api > Components > <NuxtPage>. Page Keys Another important aspect is controlling when pages are re-rendered using the pageKey prop: 
<template>
  <NuxtPage :page-key="route => route.fullPath" />
</template>
<template>
  <NuxtPage :page-key="route => route.fullPath" />
</template>
Or in your page component: 
<script setup>
definePageMeta({
  key: route => route.fullPath
})
</script>
<script setup>
definePageMeta({
  key: route => route.fullPath
})
</script>
This controls when the NuxtPage component is re-rendered. If you want to minimize re-renders, you could use a more specific key that doesn't change with every parameter Docs > Api > Components > <NuxtPage>. Understanding Nuxt Page Lifecycle It's important to note that <NuxtPage> uses <Suspense> under the hood, which affects component lifecycle behavior:
In a typical Vue application, a new page component is mounted only after the previous one has been fully unmounted. However, in Nuxt, due to how Vue <Suspense> is implemented, the new page component is mounted before the previous one is unmounted.
This might explain some of the behavior you're experiencing Docs > Api > Components. Hooks for Data Updates If you need to update data after component mounting, you can use Vue's standard lifecycle hooks like onMounted() or watch() to react to route changes: 
<script setup>
const route = useRoute()

watch(() => route.params.slug, (newSlug) => {
  // Fetch new data based on slug
}, { immediate: true })
</script>
<script setup>
const route = useRoute()

watch(() => route.params.slug, (newSlug) => {
  // Fetch new data based on slug
}, { immediate: true })
</script>
This approach allows you to update data without requiring a full component remount. I hope these suggestions help improve the performance of your dynamic routes! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@594162341369872405> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?