ContentPRO

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'
  ],
  css: ['~/assets/css/main.css']
})
You need to register @nuxt/content after @nuxt/ui-pro in the modules array, otherwise the prose components will not be available.
If your content includes Tailwind CSS classes, make sure to use the @source directive in your CSS file.

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 are provided to make the bridge between @nuxt/content and @nuxt/ui-pro:

findPageHeadline Deprecated

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

pages/[...slug].vue
<script setup lang="ts">
import { findPageHeadline } from '@nuxt/ui-pro/utils/content'

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>
Update required:findPageHeadline is now provided by Nuxt Content. Make sure to update the import and usage accordingly.
  <script setup lang="ts">
- import { findPageHeadline } from '@nuxt/ui-pro/utils/content'
+ import { findPageHeadline } from '@nuxt/content/utils'

  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 Deprecated

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>
Update required:findPageBreadcrumb is now provided by Nuxt Content. Make sure to update the import and usage accordingly.
  <script setup lang="ts">
  import type { ContentNavigationItem } from '@nuxt/content'
- import { findPageBreadcrumb, mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+ import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
+ import { findPageBreadcrumb } from '@nuxt/content/utils'

  const route = useRoute()

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

- const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link))
+ const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).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.

mapContentNavigation(navigation, options?)

  • navigation: The navigation tree (array of ContentNavigationItem).
  • options (optional):
    • labelAttribute: (string) Which field to use as label (title by default)
    • deep: (number or undefined) Controls how many levels of navigation are included (undefined by default : includes all levels)

Example: As shown in the breadcrumb example below, it's commonly used to transform the navigation data into the correct format.

app.vue
<script setup lang="ts">
import { mapContentNavigation } from '@nuxt/ui-pro/utils/content'
import { findPageBreadcrumb } from '@nuxt/content/utils'

const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const breadcrumb = computed(() => mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value?.path, { indexAsChild: true })).map(({ icon, ...link }) => link), { deep: 0 })
</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.