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

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>
That's it! You've now created your first Nuxt Content page.