Nuxt Content v3 has been released!

Try it out
Get Started

Installation

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

Add to a project

⚠️ Nuxt Content requires ssr: true (default value) to be set in Nuxt Config. Nuxt applications with ssr: false will generate as a Single-Page Application, which is currently incompatible with prerendering Nuxt Content files.

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

npx nuxi@latest module add @nuxt/content@2

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/content'
  ],
  content: {
    // ... options
  }
})

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