Dynamic Nested folder pages in nuxt 3

Question

I want a different data, and on the pages slug and section should be dynamic.Enter image description here.

I want to achieve this routing structure which I provide in the image there is folder called.

community/[...slug]/

               index.vue
               
               [section]
                       
                        index.vue 

when opened the page like localhost:3000/community/grandview-terrace It working fine

but when i open page like ocalhost:3000/community/grandview-terrace/dinner It's open the same previous page view.

Answer 1

You pages structure should be like this.

When working with nested dynamic pages, it is safer to create a dynamic Nuxt page and a dynamic folder. e.g. in your case, you want the slug to be dynamic, so you create a vue file called [slug].vue and inside this file is the NuxtPage

slug.vue

<template>
  <div>
    <NuxtPage />
  </div>
</template>

After that, create a dynamic slug folder like this [slug] and add an index.vue inside that folder, and inside that index.vue file will be the content of your dynamic slug route.

Also, this documentation will help you understand how nested pages works

index.vue content e.g

<template>
  <div>
    <div>
      Dynamic Slug page
      <pre>{{ $route.params }}</pre>
    </div>
    <NuxtLink to="/">Back to Home page</NuxtLink>
  </div>
</template>

A working example based on your question can be found here https://stackblitz.com/edit/nuxt-starter-ea4ynz?file=pages%2Findex.vue

NOTE: Always restart Nuxt when you create a new page/pages

See also NuxtJS nested routes with param