Hi @forest scarab. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Nuxt 3 Dynamic Route Not Updating: URL Changes but Page Content Remains Static
sharp lotusBOT
Based on the information provided in your question and the knowledge sources available, it appears that you're experiencing an issue with dynamic routing in Nuxt 3 where the URL changes but the page content remains static. This is a known behavior difference between Nuxt 2 and Nuxt 3.
In Nuxt 3, when navigating between pages, the URL changes before the data for the new page has finished fetching. This differs from Nuxt 2, where the URL would only change after all data fetching was complete. Github Issue (https://github.com/nuxt/nuxt/issues/29535)
To address this issue, you can implement a watcher to trigger refetching of data when the route changes. Here's how you can modify your blog/[slug].vue file to handle this:
<script setup lang="ts">
const route = useRoute()
const { data, refresh } = await useFetch('/api/blog-post')
watch(() => route.params.slug, () => refresh())
</script>
<template>
<main>
<!-- Your blog post content here -->
</main>
</template>
This code snippet uses the watch function to observe changes in the route.params.slug and triggers a refresh of the data when it changes. Docs > Migration > Component Options > watchQuery (https://nuxt.com/docs/migration/component-options#watchquery)
Additionally, ensure that your nuxt.config.ts file is properly configured for dynamic routes. You might want to add the following to your configuration:
export default defineNuxtConfig({
// ... other configurations
nitro: {
prerender: {
crawlLinks: true,
routes: ["/", "/blog"],
},
},
})
This configuration helps with prerendering and crawling of dynamic routes. Stack Overflow Post > nuxt-sitemap does not find pre-rendered pages (https://stackoverflow.com/questions/78008815)
If you're still experiencing issues after implementing these changes, you might want to double-check your API calls and ensure that they're correctly fetching data based on the current route parameters.