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:

Play on StackBlitzPlay on CodeSandbox

Or open the embedded playground.

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 nuxi@latest init content-app -t content

It will ask you with which package manager you want to install the dependencies.

  1. Move into the content-app folder and start the development server:
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:

npx nuxi@latest module add content

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

export default defineNuxtConfig({
  modules: [
  content: {
    // ... options

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:

    <ContentDoc />
⚠️ If you have an app.vue file at the project's root, ensure that you include <NuxtPage /> in its template to render pages.
⚠️ 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.