Get Started

Get started with Nuxt Content by creating a new project or adding it to an existing Nuxt application.

Play online

You can start playing with Nuxt Content in your browser using our online sandboxes:

New Project

1. You can start a fresh Nuxt Content project with:

npx nuxi@latest init content-app -t content

pnpm dlx nuxi@latest init content-app -t content

2. Install the dependencies in the content-app folder:

pnpm install --shamefully-hoist

yarn install

npm install

3. Now you'll be able to use pnpm dev to start your Nuxt content app in development mode:

pnpm run dev

yarn dev

npm run dev

Add to a project

You can add Nuxt Content at anytime during your Nuxt project development by installing the @nuxt/content module:

pnpm add -D @nuxt/content

yarn add --dev @nuxt/content

npm install --save-dev @nuxt/content

Then, add @nuxt/content to the modules section of nuxt.config.ts:

export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // https://content.nuxtjs.org/api/configuration
  }
})

Create content

Place your markdown files inside the content/ directory in the root directory of your project.

# Hello Content

The module automatically loads and parses them.

Render pages

To render content pages, add a catch-all route using the ContentDoc component:

<template>
  <main>
    <ContentDoc />
  </main>
</template>