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 contentIt 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
You can add Nuxt Content at anytime during your Nuxt project development by installing the @nuxt/content module:
pnpm add @nuxt/contentThen, 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 ContentThe 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.