Nuxt•2w ago

Nuxt routing when using content folder

Hi, I'm new to Nuxt and JS frameworks in general and struggling to understand something. I've set up a content collection for recipes using @nuxt/content, with a catch-all template for recipe pages. However, it feels like when using content collections, every page on my site must have a corresponding content file. For example, I don't have content/index.md, but I do have /pages/index.vue. Because of this setup, I get a 500 error (route is not defined). Am I missing something? Can you not mix .vue pages with content-based routing?

3 Replies

kapa.ai•2w ago

Hi @Mike. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help clarify your understanding of Nuxt routing when using the content folder. You're correct that when using @nuxt/content, you don't necessarily need to have a corresponding content file for every page on your site. You can indeed mix .vue pages with content-based routing. The error you're experiencing is likely due to how you've set up your catch-all route for recipe pages. Let's break this down: 1. For your home page (/pages/index.vue), you don't need a corresponding content/index.md file unless you want to pull content from it. 2. For your recipe pages, you've mentioned using a catch-all template. This is a good approach, but it needs to be implemented correctly. Here's how you can set up a catch-all route that works with both content-based pages and regular Vue pages: 1. Create a catch-all route file, for example, pages/[...slug].vue. 2. In this file, use the useRoute() composable to get the current route, and then query the content collection based on the route path. 3. If content is found, render it. If not, you can handle it accordingly (e.g., show a 404 page or fallback content). Here's an example of how your pages/[...slug].vue might look:

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <ContentRenderer v-if="page" :value="page" />
    <div v-else>
      <!-- Handle case when no content is found -->
      Page not found
    </div>
  </div>
</template>

<script lang="ts" setup>
const route = useRoute()
const { data: page } = await useAsyncData(route.path, () => {
  return queryCollection('content').path(route.path).first()
})
</script>

<template>
  <div>
    <ContentRenderer v-if="page" :value="page" />
    <div v-else>
      <!-- Handle case when no content is found -->
      Page not found
    </div>
  </div>
</template>

This setup allows you to have both content-based pages and regular Vue pages in your Nuxt application. The v-if condition ensures that content is only rendered when it exists for the current route. For your home page (/pages/index.vue), you don't need to query the content unless you want to display content from a markdown file. Your regular Vue component will work as expected. The "500 error" you're experiencing might be because your current catch-all route is trying to access content that doesn't exist for every route. By adding a condition to check if content exists before rendering it, you should be able to resolve this issue. Remember, Nuxt's file-based routing still applies for your .vue files in the pages/ directory, while the content module handles routing for your markdown files in the content/ directory. Nuxt Content documentation provides more detailed information on setting up and using content collections alongside regular Nuxt pages. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

MikeOP•2w ago

Sorry for the spam - it turns out I simply had an error in my index.vue file that caused an error. As the error said "Route not defined", I figured it had to do with routing, but that was false..

Gaming

Programming

Nuxt routing when using content folder

Did you find this page helpful?