nuxt.jsnuxt3.jsnuxtjs2

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


Solution

  • 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