Skip to content

Latest commit

 

History

History
142 lines (102 loc) · 3.12 KB

2.get-started.md

File metadata and controls

142 lines (102 loc) · 3.12 KB
Raw
icon layout
heroicons-outline:lightning-bolt
docs-page

Get Started

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:

: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}

New Project

::callout #summary Before getting started, please make sure to have installed the recommended setup:

#content

  1. 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

::

  1. Install the dependencies in the content-app folder:

::code-group

pnpm install --shamefully-hoist
yarn install
npm install

::

  1. 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. ::

Add to a project

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
  }
})

Create content

Place your markdown files inside the content/ directory in the root directory of your project.

# Hello Content

The module automatically loads and parses them.

Render pages

To render content pages, add a catch-all route using the ContentDoc component:

<template>
  <main>
    <ContentDoc />
  </main>
</template>

::alert{type=warning} ⚠️ Content v2 requires Nuxt 3. If you are using Nuxt 2, checkout Content v1 documentation. ::

::alert{type="info"} 👉 Next step is to head over the Writing section to learn how to use Nuxt Content. ::