Nuxt Content

Nuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.

Install the the @nuxt/content module:


yarn add --dev @nuxt/content


npm install --save-dev @nuxt/content


pnpm add -D @nuxt/content

Then, add @nuxt/content to the modules section of nuxt.config.ts:


export default defineNuxtConfig({
  modules: ['@nuxt/content'],
  content: {

Render Pages

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


    <ContentDoc />

Now just place your markdown files inside the content/ directory in the root directory of your project. This template was built using Nuxt Content, so take a look at the code to see a working example!