Get Started

How to start with Nuxt Content, by creating a fresh new project or adding it to your Nuxt application.

Play online

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

Play on StackBlitzPlay on CodeSandbox

New Project

Before getting started, please make sure to have installed the recommended setup:

  1. You can start a fresh Nuxt Content project with:
npx
npx nuxi init content-app -t content
pnpm
pnpm dlx nuxi init content-app -t content
  1. Install the dependencies in the content-app folder:
yarn
yarn install
npm
npm install
pnpm
pnpm install --shamefully-hoist
  1. Now you'll be able to use yarn dev to start your Nuxt content app in development mode:
yarn
yarn dev
npm
npm run dev
pnpm
pnpm run dev
✨ Well done! A browser window should automatically open for http://localhost:3000
👉 Next step is to head over the Writing section to learn how to use Nuxt Content.

Add to a project

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

yarn
yarn add --dev @nuxt/content
npm
npm install --save-dev @nuxt/content
pnpm
pnpm add -D @nuxt/content

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

nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'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.

content/index.md
# Hello Content

The module automatically loads and parses them.

Render pages

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

pages/[...slug].vue
<template>  <main>    <ContentDoc />  </main></template>
⚠️ Content v2 requires Nuxt 3. If you are using Nuxt 2, checkout Content v1 documentation.
👉 Next step is to head over the Writing section to learn how to use Nuxt Content.