akhtarabbas5
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai I don't want to use http://localhost:3000 in the API and if I only use pre-renderer then I will not be able to set components for different pages
72 replies
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai and when I add this in utils and try to generate routes from nuxt config I get queryCollection is not defined
utils/generateRoutes.js
export async function generateRoutes() {
// Fetch content from different collections
const blogs = await queryCollection('blog').all()
const routes = []
// Add parent page routes
blogs.forEach(blog => {
const url = blog.path.replace(/^/blogs/, "");
routes.push({
name:
blog-${url},
path: url,
file: '~/views/Blog.vue'
})
})
return routes
}
nuxt.config.ts
import { generateRoutes } from "./utils/generateRoutes"
...
hooks: {
async 'pages:extend'(pages) {
const routes = await generateRoutes()
pages.push(...routes)
}
},
...72 replies
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai in the following code it says queryCollection is not defined
export default defineNuxtPlugin(async (nuxtApp) => {
const {queryCollection} = nuxtApp
const communities = await queryCollection('communities').select('slug').all()
const events = await queryCollection('events').select('communitySlug', 'slug').all()
const news = await queryCollection('news').select('communitySlug', 'slug').all()
nuxtApp.hooks.hook('prerender:routes', (routes) => {
communities.forEach((community) => {
const communityPath =
/community/${community.slug};
routes.push(${communityPath}/events);
routes.push(${communityPath}/news);
})
events.forEach((event) => {
routes.push(/community/${event.communitySlug}/events/${event.slug});
})
news.forEach((newsItem) => {
routes.push(/community/${newsItem.communitySlug}/news/${newsItem.slug});
})
return routes
})
})72 replies
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai can you provide the updated code and show me how to use a server endpoint to generate routes.
I am using the queryCollection in this
// utils/generate-routes.ts
import { queryCollection } from '@nuxt/content'
export async function generateRoutes() {
// Fetch content from different collections
const parentPages = await queryCollection('blog').find()
const routes = []
// Add parent page routes
parentPages.forEach(page => {
routes.push({
name:
parent-${page.slug},
path: /${page.slug},
file: '~/views/Blog.vue'
})
})
return routes
}72 replies
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai I am using nuxt/content module but I don't want the sitemap to generate URLs according to folder structure in content directory as I have same URL structures for different pages and therefore I am generating routes and adding them in pages:extend hook, so can I use the same function I am using to pre-render the routes in sitmemap to add routes
72 replies
Custom Routing in Nuxt 3 with Nuxt/content 3
@kapa.ai can I get files from different folders in content directory and then return an array of object which will statify the URLS I want and use those in the pages:extend hook.
like in a seperate file can I get the files from different content directories or from different collection and define structure like this
in routes.ts
[
{
name:
${slug},
path: /${slug},
file: '~views/blog.vue',
},
{
name: ${slug},
path: /${slug},
file: '~views/testimonial.vue',
}
]
and then use this in nuxt.config.ts
hooks: {
async 'pages:extend'(pages) {
const routesFilePath = path.resolve(__dirname, '/routes.ts');
const routesModule = await import(routesFilePath);
const routes = routesModule.default;
pages.push(...routes);
}
},72 replies