CODEWITHSUNDEEP
nuxt.jsnuxt3.jsnuxtjs2
Charlotte Wells
Charlotte Wells

Reputation: 635

NuxtJS nested routes with param

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8

what would the folder structure look like to access both website and app id in:

https://dev.site.io/websites/1bbe6526-61c1-4077-8400-77a642580eac/apps/30620171-af2f-4e82-854e-2bb797c017d8/overview

cannot getting nested routes working at all

Upvotes: 4

Views: 2543

Answers (1)

Reagan
Reagan

Reputation: 2395

I was intrigued by your question because I know this problem will happen to me in my future projects. I have to admit deep nested routes are very confusing to understand. I hope my explanation below is understandable.

- pages
  - index.vue // This is the home page
  - websites.vue - // NuxtPage
  - website // FOLDER
    - index.vue // Websites page content
    - [id].vue // NuxtPage - for Dynamic content based on the ID 
    - [id] // FOLDER
      - index.vue // Dynamic ID content
      - apps.vue // Nuxtpage
      - apps // FOLDER
        - index.vue // Apps page content
        - [id].vue // NuxtPage - for Dynamic content based on the ID
        - [id] // FOLDER
          - index // Dynamic ID content
          - overview.vue // NuxtPage
          - overview // FOLDER
            - index // Overview page content

I created stackblitz example based on your question:

https://stackblitz.com/edit/nuxt-starter-ua5w8s?file=pages/websites/[id]/apps/[id]/overview/index.vue

Helpful articles explaining the basic nested routes:

https://masteringnuxt.com/blog/explaining-nested-routes

https://blog.logrocket.com/troubleshooting-nested-pages-nuxt

Upvotes: 11

Related Questions