icon | layout |
---|---|
heroicons-outline:lightning-bolt |
docs-page |
Get started with Nuxt Content by creating a new project or adding it to an existing Nuxt application.
You can start playing with Nuxt Content in your browser using our online sandboxes:
:button-link[Play on StackBlitz]{icon="IconStackBlitz" href="https://stackblitz.com/github/nuxt/starter/tree/content" blank style="margin-right: var(--space-4);"} :button-link[Play on CodeSandbox]{icon="IconCodeSandBox" href="https://codesandbox.io/s/github/nuxt/starter/tree/content" blank}
::callout #summary Before getting started, please make sure to have installed the recommended setup:
#content
-
Follow the Nuxt 3 Prerequisites
-
Download the VS Code MDC Extension ::
- You can start a fresh Nuxt Content project with:
::code-group
npx nuxi init content-app -t content
pnpm dlx nuxi init content-app -t content
::
- Install the dependencies in the
content-app
folder:
::code-group
pnpm install --shamefully-hoist
yarn install
npm install
::
- Now you'll be able to use
pnpm dev
to start your Nuxt content app in development mode:
::code-group
pnpm run dev
yarn dev
npm run dev
::
::alert{type="success"} ✨ Well done! A browser window should automatically open for http://localhost:3000 ::
::alert{type="info"} 👉 Next step is to head over the Writing section to learn how to use Nuxt Content. ::
You can add Nuxt Content at anytime during your Nuxt project development by installing the @nuxt/content
module:
::code-group
pnpm add -D @nuxt/content
yarn add --dev @nuxt/content
npm install --save-dev @nuxt/content
::
Then, add @nuxt/content
to the modules
section of nuxt.config.ts
:
export default defineNuxtConfig({
modules: [
'@nuxt/content'
],
content: {
// https://content.nuxtjs.org/api/configuration
}
})
Place your markdown files inside the content/
directory in the root directory of your project.
# Hello Content
The module automatically loads and parses them.
To render content pages, add a catch-all route using the ContentDoc
component:
<template>
<main>
<ContentDoc />
</main>
</template>
::alert{type=warning}
::alert{type="info"} 👉 Next step is to head over the Writing section to learn how to use Nuxt Content. ::