Nuxt•2mo ago

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: /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, /john 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

41 Replies

kapa.ai•2mo ago

Hi @akhtarabbas5. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement custom routing in Nuxt 3 with Nuxt Content 3 while preserving your existing URL structure, you can use a combination of Nuxt's file-based routing and custom route configuration. Here's how you can approach this: 1. Organize your content: Place your Markdown files in subdirectories within the content folder as you described in your alternative consideration. This organization will help you manage your content more effectively. 2. Create a catch-all route: In your pages directory, create a file named [...slug].vue. This will act as a catch-all route for all your content types. 3. Use Nuxt Content to fetch the appropriate content: In your [...slug].vue file, use Nuxt Content's queryCollection to fetch the content based on the current route. Here's an example of how your [...slug].vue file could look:

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(slug.join('/')).first()
})

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>

<template>
  <div>
    <ParentPage v-if="page?.type === 'parent'" :page="page" />
    <TrainingPage v-if="page?.type === 'training'" :page="page" />
    <ArticlePage v-if="page?.type === 'article'" :page="page" />
    <TestimonialPage v-if="page?.type === 'testimonial'" :page="page" />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(slug.join('/')).first()
})

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>

<template>
  <div>
    <ParentPage v-if="page?.type === 'parent'" :page="page" />
    <TrainingPage v-if="page?.type === 'training'" :page="page" />
    <ArticlePage v-if="page?.type === 'article'" :page="page" />
    <TestimonialPage v-if="page?.type === 'testimonial'" :page="page" />
  </div>
</template>

4. Configure Nuxt Content: In your content.config.ts file, define a collection that includes all your content:

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '**/*.md'
    })
  }
})

This configuration tells Nuxt Content to treat all Markdown files as pages, regardless of their location in the content directory. 5. Implement document-driven mode: To ensure that your content is properly rendered and SEO-friendly, you can implement document-driven mode as described in the Nuxt Content documentation. With this setup, your URLs will remain flat (e.g., /one, /running, /dog, /john) while your content is organized in subdirectories. The type field in your Markdown frontmatter will determine which component is rendered for each page. Remember to add the necessary type field in the frontmatter of each Markdown file:

---
title: My Article
description: This is an article about dogs
type: article
---

Article content here...

---
title: My Article
description: This is an article about dogs
type: article
---

Article content here...

This approach allows you to maintain your existing URL structure while organizing your content in a more manageable way. It also provides flexibility for adding new content types in the future. For more detailed information on custom routing in Nuxt 3, you can refer to the Nuxt documentation on custom routing. Nuxt Content documentation provides additional details on working with content in Nuxt 3. If you need to add any additional custom routes or modify the behavior further, you can use the pages:extend hook in your nuxt.config.ts file as described in the Nuxt documentation on adding custom routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@kapa.ai but it will not render the page as the slug will be test-training but the .md file for it will be under /training folder

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're right, and I apologize for the oversight in my previous answer. You're correct that with the setup I described, a URL like /test-training wouldn't automatically match a file located at /content/training/test-training.md. Let's address this issue and provide a solution that works with your desired URL structure. To solve this problem, we need to modify our approach slightly. Here's an updated solution that should work for your case: 1. Keep your content organized in subdirectories as you described. 2. In your [...slug].vue file, we'll need to search all collections for the matching content. Here's how you can modify the script section:

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, async () => {
  // Search in all subdirectories
  const collections = ['parent', 'training', 'articles', 'testimonials']
  for (const collection of collections) {
    const result = await queryCollection('content').path(`${collection}/${slug.join('/')}`).first()
    if (result) return result
  }
  return null
})

if (!page.value) {
  throw createError({ statusCode: 404, message: 'Page not found' })
}

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, async () => {
  // Search in all subdirectories
  const collections = ['parent', 'training', 'articles', 'testimonials']
  for (const collection of collections) {
    const result = await queryCollection('content').path(`${collection}/${slug.join('/')}`).first()
    if (result) return result
  }
  return null
})

if (!page.value) {
  throw createError({ statusCode: 404, message: 'Page not found' })
}

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>

This script will search for the content in all subdirectories until it finds a match. 3. Update your content.config.ts to include all subdirectories:

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: {
        include: [
          'parent/**/*.md',
          'training/**/*.md',
          'articles/**/*.md',
          'testimonials/**/*.md'
        ]
      }
    })
  }
})

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: {
        include: [
          'parent/**/*.md',
          'training/**/*.md',
          'articles/**/*.md',
          'testimonials/**/*.md'
        ]
      }
    })
  }
})

This configuration tells Nuxt Content to include all Markdown files from the specified subdirectories. 4. In your nuxt.config.ts, you might need to add some additional configuration to ensure proper handling of your routes:

export default defineNuxtConfig({
  // ... other config
  content: {
    experimental: {
      clientDB: true
    }
  },
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
        '/parent-page-slug',
        '/training-page-slug',
        '/article-slug',
        '/testimonial-slug'
      ]
    }
  }
})

export default defineNuxtConfig({
  // ... other config
  content: {
    experimental: {
      clientDB: true
    }
  },
  nitro: {
    prerender: {
      crawlLinks: true,
      routes: [
        '/',
        '/parent-page-slug',
        '/training-page-slug',
        '/article-slug',
        '/testimonial-slug'
      ]
    }
  }
})

This configuration helps with prerendering your routes and ensures that Nuxt Content can properly handle your custom routing structure. With these modifications, your setup should now correctly handle URLs like /test-training and match them to the corresponding Markdown files in the appropriate subdirectories. Remember to adjust the collections array in the [...slug].vue file if you add or remove any content subdirectories in the future. This approach allows you to maintain your desired flat URL structure while keeping your content organized in subdirectories. It provides the flexibility you need for your different content types and preserves your existing URLs for SEO purposes. Nuxt Content documentation provides more details on advanced usage and configuration options if you need to further customize this setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@kapa.ai I think it will effect the preformence as well have a lot of subdirectories in the content folder and and one another issue is we don't know how many files we will have so it's not possbile to add each url in nuxt.config

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You raise valid concerns about performance and scalability. Let's address these issues and propose a more efficient solution that doesn't require manually adding each URL to the nuxt.config file. 1. Performance Concerns: You're right that searching through multiple subdirectories could potentially impact performance, especially as your content grows. To address this, we can use Nuxt Content's database capabilities more effectively. 2. Dynamic URL Handling: Instead of manually adding URLs to nuxt.config, we can use Nuxt's runtime configuration to dynamically handle route generation. Here's an improved approach: 1. Flatten your content structure: Instead of using subdirectories, keep all your Markdown files in the root of the content directory. Use the type field in the frontmatter to distinguish between different content types. 2. Update your content.config.ts:

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '*.md'
    })
  }
})

import { defineCollection, defineContentConfig } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    content: defineCollection({
      type: 'page',
      source: '*.md'
    })
  }
})

3. Modify your [...slug].vue file:

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').where({ _path: `/${slug.join('/')}` }).findOne()
})

if (!page.value) {
  throw createError({ statusCode: 404, message: 'Page not found' })
}

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>
<template>
  <div>
    <ParentPage v-if="page?.type === 'parent'" :page="page" />
    <TrainingPage v-if="page?.type === 'training'" :page="page" />
    <ArticlePage v-if="page?.type === 'article'" :page="page" />
    <TestimonialPage v-if="page?.type === 'testimonial'" :page="page" />
  </div>
</template>

<script setup lang="ts">
const route = useRoute()
const slug = route.params.slug as string[]

const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').where({ _path: `/${slug.join('/')}` }).findOne()
})

if (!page.value) {
  throw createError({ statusCode: 404, message: 'Page not found' })
}

useSeoMeta({
  title: page.value?.title,
  description: page.value?.description
})
</script>
<template>
  <div>
    <ParentPage v-if="page?.type === 'parent'" :page="page" />
    <TrainingPage v-if="page?.type === 'training'" :page="page" />
    <ArticlePage v-if="page?.type === 'article'" :page="page" />
    <TestimonialPage v-if="page?.type === 'testimonial'" :page="page" />
  </div>
</template>

4. Use runtime configuration for prerendering: Instead of manually listing routes in nuxt.config.ts, we can use a Nuxt plugin to dynamically generate routes for prerendering. Create a new file plugins/prerender-routes.ts:

export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.server) {
    const { queryCollection } = nuxtApp
    const pages = await queryCollection('content').find()
    pages.forEach(page => {
      prerenderRoutes(page._path)
    })
  }
})

export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.server) {
    const { queryCollection } = nuxtApp
    const pages = await queryCollection('content').find()
    pages.forEach(page => {
      prerenderRoutes(page._path)
    })
  }
})

5. Update your nuxt.config.ts:

export default defineNuxtConfig({
  // ... other config
  content: {
    experimental: {
      clientDB: true
    }
  },
  nitro: {
    prerender: {
      crawlLinks: true
    }
  }
})

export default defineNuxtConfig({
  // ... other config
  content: {
    experimental: {
      clientDB: true
    }
  },
  nitro: {
    prerender: {
      crawlLinks: true
    }
  }
})

This approach offers several advantages: 1. Better Performance: By flattening the content structure and using Nuxt Content's database querying, we avoid the need to search through multiple subdirectories. 2. Scalability: The plugin dynamically generates prerender routes based on your content, eliminating the need to manually update nuxt.config.ts as your content grows. 3. Flexibility: You can still use the type field in your Markdown frontmatter to distinguish between different content types, allowing for conditional rendering in your [...slug].vue file. This solution should provide better performance and scalability for your Nuxt 3 project with Nuxt Content 3, while maintaining your desired URL structure and SEO benefits. For more information on optimizing performance with Nuxt Content, you can refer to the Nuxt Content documentation on performance. Nuxt documentation on prerendering provides additional details on advanced prerendering configurations if you need further customization. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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); } },

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can definitely use the pages:extend hook to add custom routes based on your content files. This approach is a good solution for your use case where you need to maintain a specific URL structure while organizing content in different folders. Here's how you can implement this: 1. Create a utility file to generate your routes:

// utils/generate-routes.ts
import { queryCollection } from '@nuxt/content'

export async function generateRoutes() {
  // Fetch content from different collections
  const parentPages = await queryCollection('parent').find()
  const trainingPages = await queryCollection('training').find()
  const articles = await queryCollection('articles').find()
  const testimonials = await queryCollection('testimonials').find()

  const routes = []

  // Add parent page routes
  parentPages.forEach(page => {
    routes.push({
      name: `parent-${page.slug}`,
      path: `/${page.slug}`,
      file: '~/pages/parent.vue'
    })
  })

  // Add training page routes
  trainingPages.forEach(page => {
    routes.push({
      name: `training-${page.slug}`,
      path: `/${page.slug}`,
      file: '~/pages/training.vue'
    })
  })

  // Add article routes
  articles.forEach(article => {
    routes.push({
      name: `article-${article.slug}`,
      path: `/${article.slug}`,
      file: '~/pages/article.vue'
    })
  })

  // Add testimonial routes
  testimonials.forEach(testimonial => {
    routes.push({
      name: `testimonial-${testimonial.slug}`,
      path: `/${testimonial.slug}`,
      file: '~/pages/testimonial.vue'
    })
  })

  return routes
}

// utils/generate-routes.ts
import { queryCollection } from '@nuxt/content'

export async function generateRoutes() {
  // Fetch content from different collections
  const parentPages = await queryCollection('parent').find()
  const trainingPages = await queryCollection('training').find()
  const articles = await queryCollection('articles').find()
  const testimonials = await queryCollection('testimonials').find()

  const routes = []

  // Add parent page routes
  parentPages.forEach(page => {
    routes.push({
      name: `parent-${page.slug}`,
      path: `/${page.slug}`,
      file: '~/pages/parent.vue'
    })
  })

  // Add training page routes
  trainingPages.forEach(page => {
    routes.push({
      name: `training-${page.slug}`,
      path: `/${page.slug}`,
      file: '~/pages/training.vue'
    })
  })

  // Add article routes
  articles.forEach(article => {
    routes.push({
      name: `article-${article.slug}`,
      path: `/${article.slug}`,
      file: '~/pages/article.vue'
    })
  })

  // Add testimonial routes
  testimonials.forEach(testimonial => {
    routes.push({
      name: `testimonial-${testimonial.slug}`,
      path: `/${testimonial.slug}`,
      file: '~/pages/testimonial.vue'
    })
  })

  return routes
}

2. Use this in your nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt'
import { generateRoutes } from './utils/generate-routes'
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      const routes = await generateRoutes()
      pages.push(...routes)
    }
  },
  // other config options
})

import { defineNuxtConfig } from 'nuxt'
import { generateRoutes } from './utils/generate-routes'
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      const routes = await generateRoutes()
      pages.push(...routes)
    }
  },
  // other config options
})

This approach has several advantages: 1. It allows you to organize your content in different folders while maintaining your desired URL structure. 2. You can use different Vue components for different content types. 3. It's scalable as your content grows - the routes will be generated dynamically based on your content files. The pages:extend hook is specifically designed for this kind of customization, as mentioned in the Nuxt documentation on custom routing. For prerendering these routes, you can also use the nitro:config hook to dynamically add routes to the prerender configuration:

hooks: {
  async 'nitro:config'(nitroConfig) {
    if (nitroConfig.dev) {
      return
    }
    const routes = await generateRoutes()
    nitroConfig.prerender.routes.push(...routes.map(route => route.path))
  }
}

hooks: {
  async 'nitro:config'(nitroConfig) {
    if (nitroConfig.dev) {
      return
    }
    const routes = await generateRoutes()
    nitroConfig.prerender.routes.push(...routes.map(route => route.path))
  }
}

This approach is similar to what's shown in the GitHub issue about prerendered dynamic routes. Remember that the pages:extend hook is called at build time, so your content needs to be available during the build process for this to work correctly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

also will all those route get generated in sitemap? @kapa.ai

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, the routes you add using the pages:extend hook will be included in the sitemap if you're using a sitemap module like @nuxtjs/sitemap or nuxt-simple-sitemap. However, there's an important consideration based on the knowledge sources: According to a Stack Overflow post about nuxt-sitemap, there can be issues with dynamically generated pages not appearing in the sitemap:

"sitemap is being generated of all pages in my /pages directory... in the sitemap none of those blog posts are being shown"

Stack Overflow Post The solution mentioned in that post is to add an API source for the sitemap module to generate the pages: 1. For dynamic pages, you need to follow the guide at nuxtseo.com/sitemap/guides/dynamic-urls 2. If you use Nuxt content, there's a specific integration guide at nuxtseo.com/sitemap/integrations/content To ensure your custom routes are included in the sitemap, you might need to: 1. Make sure your sitemap module is configured to crawl links if your pages are linked from other pages 2. Explicitly add your routes to the sitemap configuration 3. If using Nuxt Content, use the appropriate integration for the sitemap module This approach ensures that all your custom routes defined in the pages:extend hook will be properly included in your sitemap, maintaining your SEO benefits. I hope this helps! Let me know if you need more specific information about configuring the sitemap for your custom routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can use the same function that generates routes for the pages:extend hook to add routes to your sitemap. This approach ensures consistency between your prerendered routes and sitemap entries. When using Nuxt with custom routing and the @nuxtjs/sitemap or similar modules, you'll need to explicitly provide your custom routes to the sitemap configuration. Here's how you can do it: 1. First, make sure your route generation function is accessible to both your Nuxt config and sitemap configuration:

// utils/generate-routes.ts
export async function generateRoutes() {
  // Your existing route generation logic
  // ...
  return routes;
}

// utils/generate-routes.ts
export async function generateRoutes() {
  // Your existing route generation logic
  // ...
  return routes;
}

2. Then, use this function in your sitemap configuration:

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import { generateRoutes } from './utils/generate-routes'

export default defineNuxtConfig({
  // Your existing pages:extend hook
  hooks: {
    async 'pages:extend'(pages) {
      const routes = await generateRoutes()
      pages.push(...routes)
    }
  },
  
  // Sitemap configuration
  sitemap: {
    // For @nuxtjs/sitemap
    async routes() {
      const routes = await generateRoutes()
      return routes.map(route => route.path)
    }
  }
})

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import { generateRoutes } from './utils/generate-routes'

export default defineNuxtConfig({
  // Your existing pages:extend hook
  hooks: {
    async 'pages:extend'(pages) {
      const routes = await generateRoutes()
      pages.push(...routes)
    }
  },
  
  // Sitemap configuration
  sitemap: {
    // For @nuxtjs/sitemap
    async routes() {
      const routes = await generateRoutes()
      return routes.map(route => route.path)
    }
  }
})

This approach ensures that your sitemap includes exactly the same routes that you're adding via the pages:extend hook, maintaining consistency across your application. For prerendering these routes, you can also use the same function:

// nuxt.config.ts
nitro: {
  prerender: {
    routes: async () => {
      const routes = await generateRoutes()
      return routes.map(route => route.path)
    }
  }
}

// nuxt.config.ts
nitro: {
  prerender: {
    routes: async () => {
      const routes = await generateRoutes()
      return routes.map(route => route.path)
    }
  }
}

This way, your custom URL structure will be consistently applied across your application, prerendering, and sitemap, regardless of your content folder structure. If you're using a different sitemap module, the configuration might vary slightly, but the principle remains the same - use your route generation function to provide the routes to the sitemap module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@kapa.ai it says [unhandledRejection] (0 , _content.queryCollection) is not a function , note that I am using nuxt/content v3.1.1

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see you're encountering an error with queryCollection in Nuxt Content v3.1.1. This error typically occurs when the function is not being imported or accessed correctly. Based on the Nuxt Content v3 documentation, there are a few things to check: 1. Make sure you're using the correct import syntax. In Nuxt Content v3, queryCollection is auto-imported in Vue components but needs to be explicitly imported in server routes or utility files. 2. For server-side usage, you need to pass the event as the first parameter:

// server/api/[slug].ts
export default eventHandler(async (event) => {
  const { slug } = getRouterParams(event)
  const page = await queryCollection(event, 'docs').path(slug).first()
  return page
})

// server/api/[slug].ts
export default eventHandler(async (event) => {
  const { slug } = getRouterParams(event)
  const page = await queryCollection(event, 'docs').path(slug).first()
  return page
})

As mentioned in the server usage documentation, you also need to create a server/tsconfig.json file with:

{
  "extends": "../.nuxt/tsconfig.server.json"
}

{
  "extends": "../.nuxt/tsconfig.server.json"
}

3. If you're using queryCollection in a utility file that's used during build time (like in your route generation function), you need to import it directly:

import { queryCollection } from '@nuxt/content'

import { queryCollection } from '@nuxt/content'

4. If you're trying to use it in the nuxt.config.ts file or in a hook, remember that these run during build time, not runtime, so you might need a different approach. For your specific use case with route generation, you might need to adjust your approach to use the Content module's API differently. Consider using a server endpoint to generate your routes dynamically, or use the Content module's hooks to access your content during build time. If you're still encountering issues, could you share the specific file where you're using queryCollection and how you're importing/using it? That would help provide a more targeted solution. Nuxt Content documentation provides more details on the proper usage of queryCollection in different contexts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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 }

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'll show you how to use a server endpoint to generate routes in Nuxt 3 with Nuxt Content v3.1.1. The error you're encountering is because queryCollection can't be used directly in utility files during build time. Here's an updated approach using a server endpoint: 1. First, create a server endpoint to fetch your content:

// server/api/generate-routes.ts
export default defineEventHandler(async (event) => {
  // Fetch content from different collections
  const parentPages = await queryCollection(event, '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
})

// server/api/generate-routes.ts
export default defineEventHandler(async (event) => {
  // Fetch content from different collections
  const parentPages = await queryCollection(event, '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
})

2. Create the server tsconfig file as mentioned in the documentation:

// server/tsconfig.json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

// server/tsconfig.json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

3. Update your Nuxt config to use this endpoint for both page extension and sitemap:

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      // Only run during build time, not dev
      if (process.env.NODE_ENV === 'production') {
        // Fetch routes from our API endpoint
        const response = await fetch('<http://localhost:3000/api/generate-routes'>)
        const routes = await response.json()
        pages.push(...routes)
      }
    },
    
    // For prerendering
    async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) {
        return
      }
      
      // Fetch routes from our API endpoint
      const response = await fetch('<http://localhost:3000/api/generate-routes'>)
      const routes = await response.json()
      nitroConfig.prerender.routes.push(...routes.map(route => route.path))
    }
  },
  
  // Sitemap configuration (if using @nuxtjs/sitemap)
  sitemap: {
    async routes() {
      const response = await fetch('<http://localhost:3000/api/generate-routes'>)
      const routes = await response.json()
      return routes.map(route => route.path)
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      // Only run during build time, not dev
      if (process.env.NODE_ENV === 'production') {
        // Fetch routes from our API endpoint
        const response = await fetch('<http://localhost:3000/api/generate-routes'>)
        const routes = await response.json()
        pages.push(...routes)
      }
    },
    
    // For prerendering
    async 'nitro:config'(nitroConfig) {
      if (nitroConfig.dev) {
        return
      }
      
      // Fetch routes from our API endpoint
      const response = await fetch('<http://localhost:3000/api/generate-routes'>)
      const routes = await response.json()
      nitroConfig.prerender.routes.push(...routes.map(route => route.path))
    }
  },
  
  // Sitemap configuration (if using @nuxtjs/sitemap)
  sitemap: {
    async routes() {
      const response = await fetch('<http://localhost:3000/api/generate-routes'>)
      const routes = await response.json()
      return routes.map(route => route.path)
    }
  }
})

Alternatively, you can use a Nuxt plugin with the prerender:routes hook as shown in this GitHub issue:

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.server) {
    const parentPages = await queryCollection('blog').find()
    
    parentPages.forEach(page => {
      prerenderRoutes(`/${page.slug}`)
    })
    
    // For sitemap, you can use a similar approach with a custom hook
    nuxtApp.hooks.hook('sitemap:routes', (routes) => {
      parentPages.forEach(page => {
        routes.push(`/${page.slug}`)
      })
      return routes
    })
  }
})

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  if (process.server) {
    const parentPages = await queryCollection('blog').find()
    
    parentPages.forEach(page => {
      prerenderRoutes(`/${page.slug}`)
    })
    
    // For sitemap, you can use a similar approach with a custom hook
    nuxtApp.hooks.hook('sitemap:routes', (routes) => {
      parentPages.forEach(page => {
        routes.push(`/${page.slug}`)
      })
      return routes
    })
  }
})

This plugin approach is more elegant but requires your sitemap module to support the sitemap:routes hook. Remember that for server-side usage of queryCollection, you need to pass the event as the first parameter as shown in the server endpoint example above. These approaches should help you generate routes dynamically from your Nuxt Content collections while maintaining your desired URL structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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 }) })

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue in your plugin code. The error occurs because queryCollection is not directly available as a property of the nuxtApp object. In Nuxt Content v3.1.1, you need to import queryCollection directly in your plugin file. Here's the corrected version of your plugin code:

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  // Import queryCollection directly
  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
  })
})

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  // Import queryCollection directly
  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
  })
})

According to the Nuxt Content documentation, in Nuxt Content v3, queryCollection() is auto-imported in Vue components, but when using it in plugins or server routes, you need to make sure it's properly imported. If you're still encountering issues, you might need to use the prerenderRoutes function instead, which is specifically designed for this purpose:

export default defineNuxtPlugin(async (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()

  communities.forEach((community) => {
    const communityPath = `/community/${community.slug}`;
    prerenderRoutes(`${communityPath}/events`);
    prerenderRoutes(`${communityPath}/news`);
  })

  events.forEach((event) => {
    prerenderRoutes(`/community/${event.communitySlug}/events/${event.slug}`);
  })

  news.forEach((newsItem) => {
    prerenderRoutes(`/community/${newsItem.communitySlug}/news/${newsItem.slug}`);
  })
})

export default defineNuxtPlugin(async (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()

  communities.forEach((community) => {
    const communityPath = `/community/${community.slug}`;
    prerenderRoutes(`${communityPath}/events`);
    prerenderRoutes(`${communityPath}/news`);
  })

  events.forEach((event) => {
    prerenderRoutes(`/community/${event.communitySlug}/events/${event.slug}`);
  })

  news.forEach((newsItem) => {
    prerenderRoutes(`/community/${newsItem.communitySlug}/news/${newsItem.slug}`);
  })
})

This approach using prerenderRoutes is documented in the Nuxt prerendering documentation and should work correctly for your use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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) } }, ...

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I see the issue in your code. The error occurs because queryCollection is not available in the utility file during build time. When using Nuxt Content v3.1.1, queryCollection is auto-imported in Vue components but not in utility files that are used during the Nuxt build process. Here's how to fix this issue: 1. Create a server endpoint to fetch your content instead:

// server/api/generate-routes.ts
export default defineEventHandler(async (event) => {
  // Fetch content from blog collection
  const blogs = await queryCollection(event, 'blog').all()

  const routes = []

  // Add blog page routes
  blogs.forEach(blog => {
    const url = blog.path.replace(/^\/blogs/, ""); 
    routes.push({
      name: `blog-${url}`,
      path: url,
      file: '~/views/Blog.vue'
    })
  })

  return routes
})

// server/api/generate-routes.ts
export default defineEventHandler(async (event) => {
  // Fetch content from blog collection
  const blogs = await queryCollection(event, 'blog').all()

  const routes = []

  // Add blog page routes
  blogs.forEach(blog => {
    const url = blog.path.replace(/^\/blogs/, ""); 
    routes.push({
      name: `blog-${url}`,
      path: url,
      file: '~/views/Blog.vue'
    })
  })

  return routes
})

2. Create the required server tsconfig file:

// server/tsconfig.json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

// server/tsconfig.json
{
  "extends": "../.nuxt/tsconfig.server.json"
}

3. Update your Nuxt config to use this endpoint:

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      // Only run during build time
      if (process.env.NODE_ENV === 'production') {
        try {
          // Start a temporary server to fetch routes
          const { $fetch } = await import('ofetch')
          const routes = await $fetch('<http://localhost:3000/api/generate-routes'>)
          pages.push(...routes)
        } catch (error) {
          console.error('Failed to fetch routes:', error)
        }
      }
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      // Only run during build time
      if (process.env.NODE_ENV === 'production') {
        try {
          // Start a temporary server to fetch routes
          const { $fetch } = await import('ofetch')
          const routes = await $fetch('<http://localhost:3000/api/generate-routes'>)
          pages.push(...routes)
        } catch (error) {
          console.error('Failed to fetch routes:', error)
        }
      }
    }
  }
})

Alternatively, you can use a Nuxt plugin with the prerender:routes hook as shown in this GitHub issue:

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  const blogs = await queryCollection('blog').all()
  
  nuxtApp.hooks.hook('prerender:routes', (routes) => {
    blogs.forEach(blog => {
      const url = blog.path.replace(/^\/blogs/, "");
      routes.push(url)
    })
    return routes
  })
})

// plugins/prerender-routes.ts
export default defineNuxtPlugin(async (nuxtApp) => {
  const blogs = await queryCollection('blog').all()
  
  nuxtApp.hooks.hook('prerender:routes', (routes) => {
    blogs.forEach(blog => {
      const url = blog.path.replace(/^\/blogs/, "");
      routes.push(url)
    })
    return routes
  })
})

The plugin approach is more elegant and doesn't require starting a temporary server during build time. Remember that for server-side usage of queryCollection, you need to pass the event as the first parameter as shown in the server endpoint example above. These approaches should help you generate routes dynamically from your Nuxt Content collections while maintaining your desired URL structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@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

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I understand your concerns about using <http://localhost:3000> in the API and wanting to set different components for different pages. Let's address both issues with a better approach. You can use Nitro's server engine capabilities to access your content directly during the build process without making HTTP requests. Here's an improved solution: 1. Create a server utility function to generate routes:

// server/utils/routes.ts
export async function getContentRoutes(event) {
  // Fetch content from different collections
  const blogs = await queryCollection(event, 'blog').all()
  
  return blogs.map(blog => {
    const url = blog.path.replace(/^\/blogs/, "")
    return {
      name: `blog-${url}`,
      path: url,
      file: '~/views/Blog.vue'
    }
  })
}

// server/utils/routes.ts
export async function getContentRoutes(event) {
  // Fetch content from different collections
  const blogs = await queryCollection(event, 'blog').all()
  
  return blogs.map(blog => {
    const url = blog.path.replace(/^\/blogs/, "")
    return {
      name: `blog-${url}`,
      path: url,
      file: '~/views/Blog.vue'
    }
  })
}

2. Create a plugin that uses Nitro's direct API calls feature:

// plugins/routes.ts
export default defineNuxtPlugin(() => {
  if (process.server) {
    const blogs = queryCollection('blog').all()
    
    // Add routes for prerendering
    blogs.then(blogEntries => {
      blogEntries.forEach(blog => {
        const url = blog.path.replace(/^\/blogs/, "")
        prerenderRoutes(url)
      })
    })
  }
})

// plugins/routes.ts
export default defineNuxtPlugin(() => {
  if (process.server) {
    const blogs = queryCollection('blog').all()
    
    // Add routes for prerendering
    blogs.then(blogEntries => {
      blogEntries.forEach(blog => {
        const url = blog.path.replace(/^\/blogs/, "")
        prerenderRoutes(url)
      })
    })
  }
})

3. For the pages:extend hook, you can use Nitro's server engine to directly call your server utility:

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      if (process.env.NODE_ENV === 'production') {
        // Import the nitro runtime directly
        const { createNitro } = await import('nitropack')
        const nitro = await createNitro({
          rootDir: process.cwd(),
          dev: false
        })
        
        try {
          // Call your server utility directly
          const routes = await nitro.runCommand('server:utils:routes:getContentRoutes')
          pages.push(...routes)
        } catch (error) {
          console.error('Failed to generate routes:', error)
        } finally {
          await nitro.close()
        }
      }
    }
  }
})

// nuxt.config.ts
export default defineNuxtConfig({
  hooks: {
    async 'pages:extend'(pages) {
      if (process.env.NODE_ENV === 'production') {
        // Import the nitro runtime directly
        const { createNitro } = await import('nitropack')
        const nitro = await createNitro({
          rootDir: process.cwd(),
          dev: false
        })
        
        try {
          // Call your server utility directly
          const routes = await nitro.runCommand('server:utils:routes:getContentRoutes')
          pages.push(...routes)
        } catch (error) {
          console.error('Failed to generate routes:', error)
        } finally {
          await nitro.close()
        }
      }
    }
  }
})

This approach leverages Nitro's Server Engine capabilities to make direct API calls without using HTTP requests, as mentioned in the documentation:

"Nitro allows 'direct' calling of routes via the globally-available $fetch helper. This will make an API call to the server if run on the browser, but will directly call the relevant function if run on the server, saving an additional API call."

The benefit of this approach is: 1. No need for HTTP requests to localhost 2. You can still specify different components for different content types 3. It works during the build process for both prerendering and page generation This solution takes advantage of Nuxt's server engine to provide a more efficient and reliable way to generate your custom routes while maintaining the ability to use different components for different page types. Nuxt documentation on custom routing provides more details on the pages:extend hook and how to customize your routes. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@here need help as none of the above are working @kapa.ai all the above solutions are not working with nuxt 3.12.3 and nuxt/content 3.3.0

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The solutions provided earlier might not be compatible with the latest versions of Nuxt 3.12.3 and Nuxt Content 3.3.0 due to changes in the API or internal workings. For the most up-to-date guidance, I recommend checking the official Nuxt Content documentation and the Nuxt 3 documentation for any changes or new features that might affect route generation and content handling. Additionally, you can explore the Nuxt GitHub repository for any issues or discussions related to the latest versions, which might provide insights or workarounds for your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@kapa.ai can we define an api in server and set that to prerenderer to get routes?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can define an API in the server and use it to provide routes for the prerenderer in Nuxt. This approach allows you to dynamically generate routes based on your content or other data sources. Here's a step-by-step guide on how to achieve this: 1. Define an API Endpoint: Create a server API endpoint that will return the routes you want to prerender. This endpoint can query your content or any other data source to generate the list of routes.

   // server/api/routes.ts
   export default defineEventHandler(async (event) => {
     // Example: Fetch content from a collection
     const blogs = await queryCollection(event, 'blog').all()

     // Generate routes based on the content
     const routes = blogs.map(blog => ({
       path: blog.path.replace(/^\/blogs/, ""),
       name: `blog-${blog.slug}`
     }))

     return routes
   })

   // server/api/routes.ts
   export default defineEventHandler(async (event) => {
     // Example: Fetch content from a collection
     const blogs = await queryCollection(event, 'blog').all()

     // Generate routes based on the content
     const routes = blogs.map(blog => ({
       path: blog.path.replace(/^\/blogs/, ""),
       name: `blog-${blog.slug}`
     }))

     return routes
   })

2. Use the API in the Prerender Configuration: In your nuxt.config.ts, you can fetch the routes from the API endpoint and use them in the prerender configuration.

   // nuxt.config.ts
   import { defineNuxtConfig } from 'nuxt'

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: async () => {
           // Fetch routes from the API endpoint
           const { $fetch } = await import('ofetch')
           const routes = await $fetch('/api/routes')
           return routes.map(route => route.path)
         }
       }
     }
   })

   // nuxt.config.ts
   import { defineNuxtConfig } from 'nuxt'

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: async () => {
           // Fetch routes from the API endpoint
           const { $fetch } = await import('ofetch')
           const routes = await $fetch('/api/routes')
           return routes.map(route => route.path)
         }
       }
     }
   })

This setup allows you to dynamically generate routes for prerendering based on your content or other data sources. By using an API endpoint, you can centralize the logic for route generation and easily update it as your data changes. For more information on prerendering in Nuxt, you can refer to the Nuxt prerendering documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

akhtarabbas5OP•2mo ago

@kapa.ai it says [GET] "/api/routes": <no response> Failed to parse URL from /api/routes when I run npm run generate

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you're encountering suggests that the URL /api/routes is not being resolved correctly during the npm run generate process. This is likely because the generate command runs in a static context where server-side APIs are not available. To resolve this, you can use a different approach to access your server-side logic during the build process. Here's how you can adjust your setup: 1. Use a Local Function Instead of an API Call: Instead of relying on an API endpoint, you can directly call a function that generates the routes. This function can be part of your server utilities and accessed during the build process. 2. Define a Utility Function: Create a utility function that generates the routes. This function can be used both in your server logic and during the build process.

   // server/utils/generateRoutes.ts
   import { queryCollection } from '@nuxt/content'

   export async function generateRoutes(event) {
     const blogs = await queryCollection(event, 'blog').all()

     return blogs.map(blog => ({
       path: blog.path.replace(/^\/blogs/, ""),
       name: `blog-${blog.slug}`
     }))
   }

   // server/utils/generateRoutes.ts
   import { queryCollection } from '@nuxt/content'

   export async function generateRoutes(event) {
     const blogs = await queryCollection(event, 'blog').all()

     return blogs.map(blog => ({
       path: blog.path.replace(/^\/blogs/, ""),
       name: `blog-${blog.slug}`
     }))
   }

3. Use the Utility Function in nuxt.config.ts: Import and use this function directly in your nuxt.config.ts for the prerender configuration.

   // nuxt.config.ts
   import { defineNuxtConfig } from 'nuxt'
   import { generateRoutes } from './server/utils/generateRoutes'

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: async () => {
           // Call the utility function directly
           const routes = await generateRoutes()
           return routes.map(route => route.path)
         }
       }
     }
   })

   // nuxt.config.ts
   import { defineNuxtConfig } from 'nuxt'
   import { generateRoutes } from './server/utils/generateRoutes'

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         routes: async () => {
           // Call the utility function directly
           const routes = await generateRoutes()
           return routes.map(route => route.path)
         }
       }
     }
   })

This approach avoids the need for an HTTP request to a server API during the build process, which is not available in a static generation context. Instead, it directly uses the logic to generate routes, ensuring that your prerendering process can access the necessary data. For more details on prerendering and handling dynamic routes, you can refer to the Nuxt prerendering documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@975722081088045079> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Custom Routing in Nuxt 3 with Nuxt/content 3

Did you find this page helpful?