Content

When building a landing page, a documentation, a blog or even a changelog you will need to manage content. You can do it manually by creating a new page for each content, fetch it from a CMS, store in your own database, etc. or use the @nuxt/content module to manage your content with Git.

Setup

To get started, you can follow the Installation guide or in summary:

pnpm i @nuxt/content

Then add the module to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ['@nuxt/ui-pro'],
  modules: [
    '@nuxt/content',
    '@nuxt/ui'
  ]
})

Configuration

Now that @nuxt/content module is installed, the layer will automatically configure the syntax highlight theme with material-theme and preload some languages so you don't have to.

Typography

Components

It will also inject some Docs and Prose components to use in your Markdown files with the MDC syntax.

Utils

mapContentNavigation

findPageHeadline

findPageBreadcrumb

Usage

We'll take some real-life examples to demonstrate the integration between @nuxt/content and @nuxt/ui-pro. Assuming that you've already setup the Structure of your app, we'll start over with an app.vue file.