Get Started
Installation
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 CodeSandboxOr open the embedded playground.
New Project
Before getting started, please make sure to have installed the recommended setup:
- Follow the Nuxt 3 Prerequisites
- Download the VS Code MDC Extension
- You can start a fresh Nuxt Content project with:
Terminal
npx nuxi@latest init content-app -t content
It will ask you with which package manager you want to install the dependencies.
- Move into the
content-appfolder 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
⚠️ 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 content
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.