Installation

Install the Package

Choose your preferred package manager to install Nuxt Content v3:

pnpm add @nuxt/content

yarn add @nuxt/content

npm install @nuxt/content

bun add @nuxt/content

Register the Module

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

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

Automatic Setup

When starting a new Nuxt project with the create-nuxt CLI, you can simply select @nuxt/content from the interactive module selector. This will automatically install and register the module for you.

npm create nuxt <project-name>

yarn create nuxt <project-name>

pnpm create nuxt <project-name>

bun create nuxt <project-name>

deno -A npm:create-nuxt@latest <project-name>

Create your First Collection

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

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.

Create your First Markdown Page

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

# 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:

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

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>