2

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

Charlotte Wells
  • 375
  • 1
  • 2
  • 8

1 Answers1

7

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

Kalnode
  • 9,386
  • 3
  • 34
  • 62
ReaganM
  • 1,290
  • 1
  • 11
  • This works; helped a lot! Scouring the web, this is the only deep-nesting-dynamic-routes sample I could find for Nuxt3. Downside: this can get annoying to navigate in an IDE file tree view. For a larger project I may disable Nuxt's file-based routing and revert to manually defined route files (as done previously in a large Nuxt2 app). – Kalnode Apr 13 '23 at 14:54