Custom Routing in Nuxt 3 with Nuxt/content 3
I've been grappling with implementing custom routing in a Nuxt3 project for the past two days without success. The current website is built on WordPress and features dynamic URLs such as:
Each URL corresponds to a unique page design and will be managed using
Proposed Solution:
One approach I'm considering is placing all Markdown files in the
Directory Structure:
-| content/
---| parent-one.md
---| training-hello.md
---| article-1.md
---| testimonial-1.md
[slug].vue:
<template>
<ParentPage v-if="page.type==='parent'"/>
<TrainingPage v-if="page.type==='training'"/>
<ArticlePage v-if="page.type==='article'"/>
<TestimonialPage v-if="page.type==='testimonial'"/>
</template>
Alternative Consideration:
Alternatively, I'd prefer organizing the Markdown files into subdirectories within the content folder, such as parent training articles testimonials while retaining the existing URL structure. This would result in URLs like
Directory Structure:
-| content/
---| parent
-----| one.md
---| training
-----| running.md
---| articles
-----| dog.md
---| testimonials
-----| john.md
Challenge:
The main challenge is defining custom routes that map these organized Markdown files to the desired flat URL structure without altering the existing URLs. I'm seeking guidance on how to achieve this in Nuxt3 and nuxt/content3
The slugs will be unique so if we have one in parent then we will not have it in other folders
Any suggestions would be appreciated
Thank you
/parent-page-slug (10 pages)/traing-page-slug (6)/article-slug (200+)/testimonial-slug (50+)Each URL corresponds to a unique page design and will be managed using
@nuxt/content. Preserving the existing URL structure is crucial to maintain our current SEO rankings and backlinks.Proposed Solution:
One approach I'm considering is placing all Markdown files in the
content directory without subfolders and creating a [slug].vue file in the pages directory. This file would conditionally render components based on a type variable defined in the front matter of each Markdown file.Directory Structure:
-| content/
---| parent-one.md
---| training-hello.md
---| article-1.md
---| testimonial-1.md
[slug].vue:
<template>
<ParentPage v-if="page.type==='parent'"/>
<TrainingPage v-if="page.type==='training'"/>
<ArticlePage v-if="page.type==='article'"/>
<TestimonialPage v-if="page.type==='testimonial'"/>
</template>
Alternative Consideration:
Alternatively, I'd prefer organizing the Markdown files into subdirectories within the content folder, such as parent training articles testimonials while retaining the existing URL structure. This would result in URLs like
/one, /running, /dog, /johnDirectory Structure:
-| content/
---| parent
-----| one.md
---| training
-----| running.md
---| articles
-----| dog.md
---| testimonials
-----| john.md
Challenge:
The main challenge is defining custom routes that map these organized Markdown files to the desired flat URL structure without altering the existing URLs. I'm seeking guidance on how to achieve this in Nuxt3 and nuxt/content3
The slugs will be unique so if we have one in parent then we will not have it in other folders
Any suggestions would be appreciated
Thank you
