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?
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>
Hope that helps