Nuxt•3w ago

can you explain nuxt content with nuxt ui pro

I'm used to making a seperate page for a privacy policy, styling it etc and at most making css classes to reuse across reused sections for the terms of service page etc. can you explain nuxt content in addition to nuxt ui pro for a better way to go about this?

26 Replies

kapa.ai•3w ago

Hi @WiFi Plug. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Certainly! Using Nuxt Content together with Nuxt UI Pro offers a much more streamlined and powerful approach for managing and styling content-heavy pages like Privacy Policy or Terms of Service, compared to manually creating separate pages and hand-crafting CSS. How Nuxt Content Works - File-based CMS: You place your Markdown (.md), YAML (.yml), or other supported files in the content/ directory. Each file can represent a page (e.g., content/privacy-policy.md, content/terms-of-service.md). - Automatic Routing & Rendering: You can use a catch-all route (e.g., pages/[...slug].vue) and the <ContentRenderer> component to automatically render these files as pages, without manually creating a Vue file for each one. - Querying Content: Use the queryCollection API to fetch content based on the route or other criteria, making it easy to display the right content dynamically Nuxt Content directory structure. How Nuxt UI Pro Enhances This - Beautiful, Consistent Styling: Nuxt UI Pro overrides Nuxt Content’s prose components, so your Markdown content (headings, tables, lists, etc.) is automatically styled with beautiful, responsive, and accessible design—no need to write custom CSS for each section Nuxt UI Pro Typography. - Component Blocks: You can use Nuxt UI Pro’s premium components (like callouts, code groups, feature sections, etc.) directly in your Markdown or Vue templates, making your legal pages look professional and consistent with the rest of your site Nuxt UI Pro Content integration. - Customization: You can further customize the look and feel via your app config or by overriding component props, so you’re not locked into a single style Nuxt UI Pro Templates. Example Workflow 1. Add your legal content as Markdown:

   content/privacy-policy.md
   content/terms-of-service.md

   content/privacy-policy.md
   content/terms-of-service.md

2. Set up a catch-all page to render content:

   <!-- pages/[...slug].vue -->
   <script setup lang="ts">
   const route = useRoute()
   const { data: page } = await useAsyncData(route.path, () => {
     return queryCollection('content').path(route.path).first()
   })
   </script>

   <template>
     <UPage>
       <UPageHeader :title="page.title" :description="page.description" />
       <UPageBody>
         <ContentRenderer :value="page" />
       </UPageBody>
     </UPage>
   </template>

   <!-- pages/[...slug].vue -->
   <script setup lang="ts">
   const route = useRoute()
   const { data: page } = await useAsyncData(route.path, () => {
     return queryCollection('content').path(route.path).first()
   })
   </script>

   <template>
     <UPage>
       <UPageHeader :title="page.title" :description="page.description" />
       <UPageBody>
         <ContentRenderer :value="page" />
       </UPageBody>
     </UPage>
   </template>

This setup automatically renders any Markdown file in your content/ directory as a styled page UPageBody Example. 3. Enjoy automatic, beautiful styling:
All your headings, lists, and tables in Markdown are styled by Nuxt UI Pro’s typography system. You can also use UI Pro components in your Markdown for richer layouts. Benefits - No more manual CSS for each page: Styling is handled for you. - Consistent look across all content pages. - Easy to update content: Just edit the Markdown file. - Reusable components: Use UI Pro blocks for callouts, alerts, etc., in any content page. In summary:
Nuxt Content + Nuxt UI Pro lets you manage legal and other content-heavy pages as Markdown, with automatic, professional styling and powerful component integration—making your workflow faster, more maintainable, and visually consistent Nuxt UI Pro Content integration Nuxt UI Pro Typography. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

!ka @kapa.ai could you provide a basic example of nuxt ui pro content privacy policy page i can try out?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Certainly! Here’s a basic example of how you can create a Privacy Policy page using Nuxt Content and Nuxt UI Pro. This approach leverages Markdown for content management and Nuxt UI Pro for beautiful, consistent styling. --- 1. Create Your Privacy Policy Markdown File Place your privacy policy content in a Markdown file inside the content/ directory, for example: content/privacy-policy.md

---
title: Privacy Policy
description: Learn how we handle your data and protect your privacy.
---

# Privacy Policy

We value your privacy and are committed to protecting your personal information.

## Information We Collect

- Personal identification information (Name, email address, etc.)
- Usage data

## How We Use Your Information

We use your information to:

- Provide and maintain our service
- Notify you about changes to our service

## Contact Us

If you have any questions about this Privacy Policy, please contact us.

---
title: Privacy Policy
description: Learn how we handle your data and protect your privacy.
---

# Privacy Policy

We value your privacy and are committed to protecting your personal information.

## Information We Collect

- Personal identification information (Name, email address, etc.)
- Usage data

## How We Use Your Information

We use your information to:

- Provide and maintain our service
- Notify you about changes to our service

## Contact Us

If you have any questions about this Privacy Policy, please contact us.

--- 2. Set Up a Catch-All Page to Render Content Create a catch-all page (e.g., pages/[...slug].vue) to render any Markdown file from your content/ directory using Nuxt UI Pro’s layout components: pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'default'
})

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

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />
<UPageBody>
      <ContentRenderer :value="page" />
    </UPageBody>
  </UPage>
</template>

<script setup lang="ts">
const route = useRoute()

definePageMeta({
  layout: 'default'
})

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

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />
<UPageBody>
      <ContentRenderer :value="page" />
    </UPageBody>
  </UPage>
</template>

This setup will automatically render your Markdown file as a beautifully styled page using Nuxt UI Pro’s components PageBody Example Nuxt Content directory structure. --- 3. Result Now, visiting /privacy-policy in your app will display your privacy policy with Nuxt UI Pro’s typography and layout, no manual CSS required. --- Tip:
You can use the same approach for other legal pages (like Terms of Service) by simply adding more Markdown files to the content/ directory. For more details, see the official Nuxt UI Pro Content integration guide: Nuxt UI Pro Content integration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai what about the nuct ui pro components content toc and content surround how do i make those work?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use the Nuxt UI Pro components ContentToc (Table of Contents) and ContentSurround (Prev/Next navigation) with your Nuxt Content pages, you need to: 1. Fetch the necessary data from your content files (the TOC and the surrounding pages). 2. Pass that data as props to the respective components in your page template. Here’s a basic example using a catch-all page (pages/[...slug].vue) that demonstrates how to integrate both components:

<script setup lang="ts">
const route = useRoute()

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

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => 
  queryCollectionItemSurroundings('content', route.path)
)
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="surround" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

<script setup lang="ts">
const route = useRoute()

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

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => 
  queryCollectionItemSurroundings('content', route.path)
)
</script>

<template>
  <UPage>
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer :value="page" />

      <USeparator />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="surround" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template #right>
      <UContentToc :links="page.body.toc.links" />
    </template>
  </UPage>
</template>

Key points: - <UContentToc :links="page.body.toc.links" /> displays a sticky Table of Contents for the current page, using the TOC links generated by Nuxt Content. - <UContentSurround :surround="surround" /> displays navigation links to the previous and next pages, using the data from queryCollectionItemSurroundings. Requirements: - These components are only available when the @nuxt/content module is installed and set up as described in the Nuxt UI Pro Content integration guide. - The surround and toc data are fetched using Nuxt Content’s query APIs, as shown above. For more details and advanced usage, see the official docs for ContentToc and ContentSurround ContentToc Usage ContentSurround Usage. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai interesting thanks, and what if i want to customise something and have a colored border under my title that extends the width of the page but is grey beyond the text? then where can i modify that?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To achieve a custom colored border under your title that extends the width of the page but is grey beyond the text, you should customize the relevant Nuxt UI Pro component’s slot classes in your app.config.ts or via the uiPro option in your Vite config. For example, the UPageHeader component allows you to override the root, container, title, and other slots. You can add custom border classes to the root or container slot, and use utility classes to control the border color and width. Here’s how you might approach it:

export default defineAppConfig({
  uiPro: {
    pageHeader: {
      slots: {
        root: 'relative border-b border-default py-8', // This sets a border across the full width
        container: 'relative', // You can add custom classes here
        title: 'relative z-10 inline-block border-b-4 border-primary', // Colored border just under the text
        // Optionally, add a pseudo-element or extra div for the grey border beyond the text
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    pageHeader: {
      slots: {
        root: 'relative border-b border-default py-8', // This sets a border across the full width
        container: 'relative', // You can add custom classes here
        title: 'relative z-10 inline-block border-b-4 border-primary', // Colored border just under the text
        // Optionally, add a pseudo-element or extra div for the grey border beyond the text
      }
    }
  }
})

You can further customize by using pseudo-elements or extra markup in your page template if you need the border to visually extend beyond the title text, but remain colored only under the text and grey elsewhere. The slot system is designed for this kind of fine-tuning PageHeader Theme. Summary:
- Use the slots configuration for pageHeader in your app.config.ts to control border styling. - Add custom classes to the title slot for the colored border under the text. - Use the root or container slot for the full-width grey border. For more details, see the PageHeader Theme documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai and then later say i have a blog section of my site, a support section of my site and these privacy policy, tos, site rules pages how do i group those so the content surround for the privacy policy only shows the tos and site rules as recommended and the blog posts only show other blog posts as recommended etc?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To group different sections of your site (like blog, support, and legal pages) so that ContentSurround only shows relevant "previous/next" links within each group, you should use Nuxt Content Collections. Collections allow you to logically separate your content (e.g., blog posts, support articles, legal pages) and query them independently. How to do it: 1. Define Collections in content.config.ts:

   import { defineCollection, z } from '@nuxt/content'

   export const collections = {
     blog: defineCollection({
       type: 'page',
       source: 'blog/**/*.md',
       schema: z.object({
         title: z.string(),
         date: z.date()
       })
     }),
     support: defineCollection({
       type: 'page',
       source: 'support/**/*.md',
       schema: z.object({
         title: z.string()
       })
     }),
     legal: defineCollection({
       type: 'page',
       source: 'legal/**/*.md',
       schema: z.object({
         title: z.string()
       })
     })
   }

   import { defineCollection, z } from '@nuxt/content'

   export const collections = {
     blog: defineCollection({
       type: 'page',
       source: 'blog/**/*.md',
       schema: z.object({
         title: z.string(),
         date: z.date()
       })
     }),
     support: defineCollection({
       type: 'page',
       source: 'support/**/*.md',
       schema: z.object({
         title: z.string()
       })
     }),
     legal: defineCollection({
       type: 'page',
       source: 'legal/**/*.md',
       schema: z.object({
         title: z.string()
       })
     })
   }

Place your files in the corresponding folders:
- content/blog/ for blog posts
- content/support/ for support articles
- content/legal/ for privacy policy, TOS, site rules, etc. 2. Query Surroundings Within the Same Collection: When you use queryCollectionItemSurroundings, specify the collection name. For example, for a legal page:

   const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     return queryCollectionItemSurroundings('legal', route.path)
   })

   const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     return queryCollectionItemSurroundings('legal', route.path)
   })

For a blog post:

   const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     return queryCollectionItemSurroundings('blog', route.path)
   })

   const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
     return queryCollectionItemSurroundings('blog', route.path)
   })

This ensures that the "prev/next" navigation only includes items from the same collection, so your privacy policy, TOS, and site rules will only link to each other, and blog posts will only link to other blog posts Content Collections queryCollectionItemSurroundings usage. Summary:
- Use collections to group your content. - Use the collection name in your queryCollectionItemSurroundings call. - This keeps navigation contextually relevant for each section of your site. This approach is fully supported by Nuxt Content v3 and works seamlessly with Nuxt UI Pro’s ContentSurround component. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai ok cool, but i still want /terms-of-service and the legal pages served at the root of my site so does this still work?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you can still serve your legal pages (like /terms-of-service, /privacy-policy, etc.) at the root of your site while grouping them in a collection for navigation purposes. How this works: - In Nuxt Content, the URL path for each page is determined by the file’s location and name in the content/ directory. For example, a file at content/terms-of-service.md will be available at /terms-of-service Collection Types: Path generation. - You can define a collection (e.g., legal) that includes all your legal pages, even if they are at the root of the content/ directory, by specifying the appropriate source glob pattern in your content.config.ts. For example:

  defineCollection({
    type: 'page',
    source: '{privacy-policy,terms-of-service,site-rules}.md'
  })

  defineCollection({
    type: 'page',
    source: '{privacy-policy,terms-of-service,site-rules}.md'
  })

Or, if you want to include all Markdown files at the root:

  defineCollection({
    type: 'page',
    source: '*.md'
  })

  defineCollection({
    type: 'page',
    source: '*.md'
  })

- When you use queryCollectionItemSurroundings('legal', route.path), it will only consider the files defined in the legal collection, regardless of their directory, so your navigation will work as intended Collection Sources. Summary:
You can group your legal pages for navigation while keeping their URLs at the root. Just ensure your collection’s source includes those root files, and Nuxt Content will handle both the routing and the navigation grouping as you want. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai what if i want to modify the default h2 thing with my own code where do i make that file and how do i set it as the default? since i want to modify it to add a border that's highlighted under where the text is and then gray the rest of the width so i can't do that through app.config.ts alone so i need to modify it?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To override the default h2 rendering in Nuxt UI Pro’s prose (typography) system, you typically use the app.config.ts to customize classes. However, as you noted, if you need to inject custom markup (not just classes)—for example, to add a highlighted border under the text and a gray border for the rest of the width—the knowledge sources do not explicitly document a way to replace the default h2 component with your own custom Vue component. The documented approach for customizing headings is to use the app.config.ts to set custom classes for the h2 slot, like this:

export default defineAppConfig({
  uiPro: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:ps-2 lg:-ms-2'
        }
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    prose: {
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          leading: [
            'absolute -ms-8 top-1 opacity-0 group-hover:opacity-100 group-focus:opacity-100 p-1 bg-elevated hover:text-primary rounded-md hidden lg:flex text-muted',
            'transition'
          ],
          leadingIcon: 'size-4 shrink-0',
          link: 'group lg:ps-2 lg:-ms-2'
        }
      }
    }
  }
})

But this only allows you to change the classes, not the markup structure Nuxt UI Pro Typography. If you need to inject custom markup for h2 (such as a border that is highlighted under the text and gray for the rest of the width), the knowledge sources do not provide a documented way to replace the default heading renderer with your own component. There is no mention of a slot or component override mechanism for prose elements beyond class customization. Summary:
- You can customize the classes for h2 via app.config.ts. - There is no documented way in the provided sources to replace the default h2 renderer with a custom Vue component for advanced markup needs. If you need more advanced customization than what classes allow, you may need to look for undocumented features or open an issue/discussion with the Nuxt UI Pro team for guidance, as this is not covered in the current documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai

<script setup lang="ts">
const route = useRoute()

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description'],
  })
})
</script>

<template>
  <UPage v-if="page" class="p-4">
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />

      <USeparator v-if="surround?.filter(Boolean).length" />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="(surround as any)" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template v-if="page?.body?.toc?.links?.length" #right>
      <UContentToc
        title="Sections on this page"
        highlight
        highlight-color="primary"
        color="primary"
        :links="page?.body?.toc?.links"
      />
    </template>
  </UPage>
</template>

<script setup lang="ts">
const route = useRoute()

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
}

// Fetch the surrounding pages (prev/next)
const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description'],
  })
})
</script>

<template>
  <UPage v-if="page" class="p-4">
    <UPageHeader :title="page.title" :description="page.description" />

    <UPageBody>
      <ContentRenderer v-if="page.body" :value="page" />

      <USeparator v-if="surround?.filter(Boolean).length" />

      <!-- Prev/Next navigation -->
      <UContentSurround :surround="(surround as any)" />
    </UPageBody>

    <!-- Table of Contents in the right slot -->
    <template v-if="page?.body?.toc?.links?.length" #right>
      <UContentToc
        title="Sections on this page"
        highlight
        highlight-color="primary"
        color="primary"
        :links="page?.body?.toc?.links"
      />
    </template>
  </UPage>
</template>

i have this currently but i want the content surround to always show two cards rather than one on some pages when i have 3 total pages

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on the knowledge sources, the UContentSurround component displays previous and next links using the array provided to its surround prop. The array is expected to contain two items: the previous and next items relative to the current page. If there are fewer than two items (for example, if you are on the first or last page in the collection), only one card will be shown (ContentSurround Usage). The behavior you are seeing—where only one card is shown on some pages when you have three total pages—is the default and expected behavior. The component will only show a card for a previous or next item if it exists. If you want to always show two cards, you would need to ensure that the surround array always contains two items (even if one is null), which is already how the queryCollectionItemSurroundings function works by default (queryCollectionItemSurroundings API). However, the component will not render a card for a null value. There is no documented prop or option in the knowledge sources to force the display of two cards (e.g., with placeholders) when only one neighbor exists. The component is designed to only show cards for actual previous/next items. Summary:
- UContentSurround will only show cards for existing previous/next items. - There is no documented way to force it to always show two cards if only one neighbor exists. - If you want to customize this behavior (e.g., show a disabled or placeholder card), you would need to implement a custom solution, but this is not covered in the provided documentation. If you need more advanced behavior, you may need to create a wrapper component or modify the template, but this is outside the scope of the documented features. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

WiFi PlugOP•3w ago

@kapa.ai what about adding breadcrumbs to the page

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You can add breadcrumbs to your page using the UBreadcrumb component from Nuxt UI Pro. The recommended approach is to generate the breadcrumb items based on your content navigation, often using the findPageBreadcrumb and mapContentNavigation utilities provided by Nuxt UI Pro and Nuxt Content. Here’s a documented example of how to add breadcrumbs to your page header:

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

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

// Compute the breadcrumb items for the current page
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>
    <!-- ...rest of your page... -->
  </UPage>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

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

// Compute the breadcrumb items for the current page
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>
    <!-- ...rest of your page... -->
  </UPage>
</template>

- UBreadcrumb expects an array of items with properties like label, icon, and to. - The findPageBreadcrumb utility finds the breadcrumb path for the current page. - The mapContentNavigation utility transforms the navigation data into the correct format for the breadcrumb component. This approach ensures your breadcrumbs are automatically generated and kept in sync with your content structure (Nuxt UI Pro Typography: findPageBreadcrumb example). For more details, see the UBreadcrumb documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@679734274840330384> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

can you explain nuxt content with nuxt ui pro

Did you find this page helpful?