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:
-
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.
-
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:
- Create a catch-all route file, for example,
pages/[...slug].vue.
- In this file, use the
useRoute() composable to get the current route, and then query the content collection based on the route path.
- 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>
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.
void ether
woven jay