Nuxt•3mo ago

Setting Up An Article Based Website Using Nuxt Content

Hi all, Has anyone managed to set up a Nuxt3 content site? I believe I have done all the steps correctly: - Added module to nuxt.config.ts - Added basic content.config.ts - Page file structure is pages -> articles -> index.vue & [slug].vue - Created content folder which is content -> articles -> *.md files. It seems that when I use the following code

const { data: article } = await useAsyncData(() =>
    queryCollection('articles').where({ _path:

${slug}

 }).findOne()
)

I get nothing, any help will be much appreciated!

3 Replies

kapa.ai•3mo ago

Hi @nathanr. 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 you set up a Nuxt 3 content site using Nuxt Content v3. It seems you're on the right track, but there are a few adjustments you need to make. Let's go through the setup process and address your specific issue: 1. Module Installation: Make sure you've installed the @nuxt/content module. You can do this by running:

npx nuxi module add content

npx nuxi module add content

This will install the module and add it to your nuxt.config.ts Installation. 2. Content Configuration: Your content.config.ts should define the collection. Here's an example:

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

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

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

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

This sets up an 'articles' collection for all Markdown files in the content/articles directory Define. 3. Page Structure: Your page structure looks correct. For the [slug].vue file, you can use the following setup:

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

<template>
  <ContentRenderer v-if="article" :value="article" />
  <p v-else>Article not found.</p>
</template>

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

<template>
  <ContentRenderer v-if="article" :value="article" />
  <p v-else>Article not found.</p>
</template>

This uses the path method instead of where, which is more appropriate for page-type collections Migration. 4. Content Folder: Your content folder structure is correct. 5. Querying Content: The issue with your query is that in Nuxt Content v3, the API has changed. Instead of using where({ _path: ${slug} }), you should use the path method. Also, note that internal fields with _ prefix have been removed or renamed. Here's the correct way to query:

const { data: article } = await useAsyncData(() =>
  queryCollection('articles').path(route.path).first()
)

const { data: article } = await useAsyncData(() =>
  queryCollection('articles').path(route.path).first()
)

This assumes you're using the route path to fetch the article Query Collection. By making these adjustments, you should be able to successfully set up and query your Nuxt 3 content site using Nuxt Content v3. If you're still having issues, make sure all your Markdown files in the content/articles directory have the correct frontmatter and content structure. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

nathanrOP•3mo ago

Wow that actually helped

Gaming

Programming

Setting Up An Article Based Website Using Nuxt Content

Did you find this page helpful?