Content

Nuxt UI Pro enhances Nuxt Content with beautiful components and styling.
Nuxt UI Pro v3 is only compatible with Nuxt Content v3. If you're using Nuxt Content v2, you must use Nuxt UI Pro v1.

Installation

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

pnpm add @nuxt/content

Then, add the @nuxt/content module in your nuxt.config.ts:

nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui-pro',
    '@nuxt/content'
  ]
})
You need to register @nuxt/content after @nuxt/ui-pro in the modules array.
If your content includes Tailwind CSS classes, make sure to check the theme configuration guide.

Components

You might be using @nuxt/content to build a documentation. To help you with that, we've built some components that you can use in your pages:

Typography

To make the most out of @nuxt/content, we've revamped our typography system in v3. Instead of using the @tailwindcss/typography plugin like in v1, we now provide custom implementations of all prose components directly within Nuxt UI Pro. This gives us precise control over styling while ensuring perfect visual harmony with our design system.

Learn more about the new Typography system and all the available components.

Utils

Some utils will be auto-imported to make the bridge between @nuxt/content and @nuxt/ui-pro:

findPageHeadline

This util will allow you to bind an headline in the PageHeader based on the page .navigation.

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute()

const { data: page } = await useAsyncData(route.path, () => queryCollection('content').path(route.path).first())

const headline = computed(() => findPageHeadline(page.value))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page" :headline="headline" />
  </UPage>
</template>

findPageBreadcrumb

This util will recursively find the breadcrumb of a page based on the navigation so you can use it in the PageHeader #headline slot.

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

provide('navigation', navigation)
</script>
pages/[...slug].vue
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>

mapContentNavigation

This util will map the navigation from queryCollectionNavigation and transform it recursively into an array of objects that can be used by various components. As shown in the breadcrumb example above, it's commonly used to transform the navigation data into the correct format:

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>

Internationalization (i18n)

Learn how to internationalize your Nuxt app with multi-directional support (LTR/RTL).

Typography

Nuxt UI Pro provides beautiful typography components and utilities to style your content.