Getting Started

Installation

Get started with Nuxt Content v3 in your Nuxt application.

Install the Package

Choose your preferred package manager to install Nuxt Content v3:

pnpm add @nuxt/content

Register the Module

Add the Nuxt Content module to your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content']
})

Create your First Collection

Create a content.config.ts file in your project root directory:

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

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

This configuration creates a default content collection that processes all Markdown files located in the content folder of your project. You can customize the collection settings based on your needs.

The type: page means there is a 1-to-1 relationship between content files and pages on your site.
Learn more in our Collections guide.

Create your First Markdown Page

Create a content/index.md file in your project root directory:

content/index.md
# My First Page

Here is some content.

Read more about writing Markdown pages.

Display your Page

Create a pages/index.vue file and display the page content:

pages/index.vue
<script setup lang="ts">
const { data: home } = await useAsyncData(() => queryCollection('content').path('/').first())

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

<template>
  <ContentRenderer v-if="home" :value="home" />
  <div v-else>Home not found</div>
</template>
If you are installing Nuxt Content in a new Nuxt project and you didn't have pages directory, you also need to update the app.vue file to allow rendering the pages by adding the NuxtPage component. (If you already have some pages in your project, you are good to go.)
app.vue
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
That's it! You've now created your first Nuxt Content page.