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