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