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
yarn add --dev @nuxt/content
npm
npm install --save-dev @nuxt/content
pnpm
pnpm add -D @nuxt/content
Then, 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 },});
Render Pages
To render content pages, add a catch-all route using the ContentDoc component:
/pages/\[...slug\].vue
<template> <main> <ContentDoc /> </main></template>
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!