How do I dynamically handle endless nested routes with Nuxt 3?

Question

What if I have endless nested routes that don't stop (i.e. articles within articles based on user creation):

/articles/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/id/infinity

How do you handle something like that in Nuxt 3 without having to manually create each directory and dynamic file?

Answer 1

I need to use catch all routes for that. Documentation and example.

Your pages structure is like this.

|-pages
|-articles = Folder
|--[...id].vue = Catch all routes
|--index.vue = Article Content 
|-articles.vue = NuxtPage
|-index.vue = Home page

~pages/articles.vue

<script lang="ts" setup>

</script>
<template>
  <div>
    <NuxtPage />
  </div>
</template>
<style scoped lang="css"></style>

~/pages/articles/index.vue Articles Content example

<script lang="ts" setup>

</script>
<template>
  <div>
    Articles page
  </div>
</template>
<style scoped lang="css"></style>

~/pages/articles/[...id].vue Dynamic ID

<script lang="ts" setup>

const route = useRoute()
</script>
<template>
  <div>
    <h1>Dynamic ID. Params: {{ route.params.id }}</h1>
  </div>
</template>
<style scoped lang="css"></style>

Expected output.

Hope that helps