content
Use the content/ directory to create a file-based CMS for your application.
Nuxt Content reads the content/ directory in your project and parses .md, .yml, .csv and .json files to create a file-based CMS for your application.
- Render your content with built-in components.
- Query your content with a MongoDB-like API.
- Use your Vue components in Markdown files with the MDC syntax.
- Automatically generate your navigation.
Enable Nuxt Content
Install the @nuxt/content module in your project as well as adding it to your nuxt.config.ts with one command:
Terminal
npx nuxi module add content
Create Content
Place your markdown files inside the content/ directory:
content/index.md
# Hello Content
The module automatically loads and parses them.
Render Content
To render content pages, add a catch-all route using the <ContentDoc> component:
pages/[...slug].vue
<template>
<main>
<!-- ContentDoc returns content for `$route.path` by default or you can pass a `path` prop -->
<ContentDoc />
</main>
</template>
Documentation
Head over to https://content.nuxt.com to learn more about the Content module features, such as how to build queries and use Vue components in your Markdown files with the MDC syntax.