Get Started
How to 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 CodeSandboxNew Project
Before getting started, please make sure to have installed the recommended setup:
- You can start a fresh Nuxt Content project with:
npx
npx nuxi init content-app -t content- Install the dependencies in the
content-appfolder:
yarn
yarn install- Now you'll be able to use
yarn devto start your Nuxt content app in development mode:
yarn
yarn 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/contentThen, add @nuxt/content to the modules section of nuxt.config.ts:
nuxt.config.ts
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 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>⚠️ 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.