Skip to content

Conversation

@onmax
Copy link

@onmax onmax commented Oct 29, 2025

Issue

When copying page content from https://ui.nuxt.com/docs/components, the :components-list{category="X"} MDC components were not being expanded, resulting in empty <components-list category="X"></components-list> tags in the copied markdown.

Before

# Components

> Build beautiful, accessible, and responsive user interfaces with 110+ Vue components powered by Tailwind CSS and Reka UI.

## Layout

Core structural components for organizing your application's layout and establishing a consistent foundation for your UI.

<components-list category="layout">



</components-list>

## Element

Essential UI building blocks including buttons, badges, avatars, icons, and other foundational interface elements for crafting intuitive and consistent user experiences.

<components-list category="element">



</components-list>

## Form

Comprehensive form components for building interactive user input experiences, including text inputs, selects, checkboxes, radio groups, switches, sliders, and complete form validation.

<components-list category="form">



</components-list>

## Data

Components for displaying and organizing data, including tables, accordions, carousels, timelines, trees, and user profiles.

<components-list category="data">



</components-list>

## Navigation

Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, tabs, steppers, links, and command palettes.

<components-list category="navigation">



</components-list>

## Overlay

Floating UI elements that appear above the main content, including modals, popovers, tooltips, drawers, slideovers, and context menus.

<components-list category="overlay">



</components-list>

## Page

Pre-built marketing and content sections for creating landing pages, blogs, pricing pages, and other marketing materials.

<components-list category="page">



</components-list>

<note target="_blank" to="https://github.com/nuxt-ui-templates/saas">

Check out the **SaaS template** on GitHub for a real-life example.

</note>

## Dashboard

Specialized components for building dynamic dashboards with resizable panels, collapsible sidebars, toolbars, and search functionality.

<components-list category="dashboard">



</components-list>

<note target="_blank" to="https://github.com/nuxt-ui-templates/dashboard">

Check out the **Dashboard template** on GitHub for a real-life example.

</note>

## Chat

Components for building conversational interfaces and chatbots, powered by the **Vercel AI SDK**.

<components-list category="chat">



</components-list>

<note target="_blank" to="https://github.com/nuxt-ui-templates/chat">

Check out the **AI Chat template** on GitHub for a real-life example.

</note>

## Content

Components that integrate with [Content](/docs/getting-started/integrations/content) for documentation sites, including table of contents, search, navigation trees, and surrounding page links.

<components-list category="content">



</components-list>

<note target="_blank" to="https://github.com/nuxt-ui-templates/docs">

Check out the **Docs template** on GitHub for a real-life example.

</note>

## Color Mode

Components that integrate with [Color Mode](/docs/getting-started/integrations/color-mode) for theme switching between light, dark, and system preferences.

<components-list category="color-mode">



</components-list>

## i18n

Components that integrate with [i18n](/docs/getting-started/integrations/i18n) for internationalization and locale management.

<components-list category="i18n">



</components-list>


After

# Components

> Build beautiful, accessible, and responsive user interfaces with 110+ Vue components powered by Tailwind CSS and Reka UI.

## Layout

Core structural components for organizing your application's layout and establishing a consistent foundation for your UI.

- [App](https://ui.nuxt.com/docs/components/app)
- [Container](https://ui.nuxt.com/docs/components/container)
- [Error](https://ui.nuxt.com/docs/components/error)
- [Footer](https://ui.nuxt.com/docs/components/footer)
- [Header](https://ui.nuxt.com/docs/components/header)
- [Main](https://ui.nuxt.com/docs/components/main)

## Element

Essential UI building blocks including buttons, badges, avatars, icons, and other foundational interface elements for crafting intuitive and consistent user experiences.

- [Alert](https://ui.nuxt.com/docs/components/alert)
- [Avatar](https://ui.nuxt.com/docs/components/avatar)
- [AvatarGroup](https://ui.nuxt.com/docs/components/avatar-group)
- [Badge](https://ui.nuxt.com/docs/components/badge)
- [Banner](https://ui.nuxt.com/docs/components/banner)
- [Button](https://ui.nuxt.com/docs/components/button)
- [Calendar](https://ui.nuxt.com/docs/components/calendar)
- [Card](https://ui.nuxt.com/docs/components/card)
- [Chip](https://ui.nuxt.com/docs/components/chip)
- [Collapsible](https://ui.nuxt.com/docs/components/collapsible)
- [FieldGroup](https://ui.nuxt.com/docs/components/field-group)
- [Icon](https://ui.nuxt.com/docs/components/icon)
- [Kbd](https://ui.nuxt.com/docs/components/kbd)
- [Progress](https://ui.nuxt.com/docs/components/progress)
- [Separator](https://ui.nuxt.com/docs/components/separator)
- [Skeleton](https://ui.nuxt.com/docs/components/skeleton)

## Form

Comprehensive form components for building interactive user input experiences, including text inputs, selects, checkboxes, radio groups, switches, sliders, and complete form validation.

- [Checkbox](https://ui.nuxt.com/docs/components/checkbox)
- [CheckboxGroup](https://ui.nuxt.com/docs/components/checkbox-group)
- [ColorPicker](https://ui.nuxt.com/docs/components/color-picker)
- [FileUpload](https://ui.nuxt.com/docs/components/file-upload)
- [Form](https://ui.nuxt.com/docs/components/form)
- [FormField](https://ui.nuxt.com/docs/components/form-field)
- [Input](https://ui.nuxt.com/docs/components/input)
- [InputMenu](https://ui.nuxt.com/docs/components/input-menu)
- [InputNumber](https://ui.nuxt.com/docs/components/input-number)
- [InputTags](https://ui.nuxt.com/docs/components/input-tags)
- [PinInput](https://ui.nuxt.com/docs/components/pin-input)
- [RadioGroup](https://ui.nuxt.com/docs/components/radio-group)
- [Select](https://ui.nuxt.com/docs/components/select)
- [SelectMenu](https://ui.nuxt.com/docs/components/select-menu)
- [Slider](https://ui.nuxt.com/docs/components/slider)
- [Switch](https://ui.nuxt.com/docs/components/switch)
- [Textarea](https://ui.nuxt.com/docs/components/textarea)

## Data

Components for displaying and organizing data, including tables, accordions, carousels, timelines, trees, and user profiles.

- [Accordion](https://ui.nuxt.com/docs/components/accordion)
- [Carousel](https://ui.nuxt.com/docs/components/carousel)
- [Empty](https://ui.nuxt.com/docs/components/empty)
- [Marquee](https://ui.nuxt.com/docs/components/marquee)
- [Table](https://ui.nuxt.com/docs/components/table)
- [Timeline](https://ui.nuxt.com/docs/components/timeline)
- [Tree](https://ui.nuxt.com/docs/components/tree)
- [User](https://ui.nuxt.com/docs/components/user)

## Navigation

Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, tabs, steppers, links, and command palettes.

- [Breadcrumb](https://ui.nuxt.com/docs/components/breadcrumb)
- [CommandPalette](https://ui.nuxt.com/docs/components/command-palette)
- [FooterColumns](https://ui.nuxt.com/docs/components/footer-columns)
- [Link](https://ui.nuxt.com/docs/components/link)
- [NavigationMenu](https://ui.nuxt.com/docs/components/navigation-menu)
- [Pagination](https://ui.nuxt.com/docs/components/pagination)
- [Stepper](https://ui.nuxt.com/docs/components/stepper)
- [Tabs](https://ui.nuxt.com/docs/components/tabs)

## Overlay

Floating UI elements that appear above the main content, including modals, popovers, tooltips, drawers, slideovers, and context menus.

- [ContextMenu](https://ui.nuxt.com/docs/components/context-menu)
- [Drawer](https://ui.nuxt.com/docs/components/drawer)
- [DropdownMenu](https://ui.nuxt.com/docs/components/dropdown-menu)
- [Modal](https://ui.nuxt.com/docs/components/modal)
- [Popover](https://ui.nuxt.com/docs/components/popover)
- [Slideover](https://ui.nuxt.com/docs/components/slideover)
- [Toast](https://ui.nuxt.com/docs/components/toast)
- [Tooltip](https://ui.nuxt.com/docs/components/tooltip)

## Page

Pre-built marketing and content sections for creating landing pages, blogs, pricing pages, and other marketing materials.

- [AuthForm](https://ui.nuxt.com/docs/components/auth-form)
- [BlogPost](https://ui.nuxt.com/docs/components/blog-post)
- [BlogPosts](https://ui.nuxt.com/docs/components/blog-posts)
- [ChangelogVersion](https://ui.nuxt.com/docs/components/changelog-version)
- [ChangelogVersions](https://ui.nuxt.com/docs/components/changelog-versions)
- [Page](https://ui.nuxt.com/docs/components/page)
- [PageAnchors](https://ui.nuxt.com/docs/components/page-anchors)
- [PageAside](https://ui.nuxt.com/docs/components/page-aside)
- [PageBody](https://ui.nuxt.com/docs/components/page-body)
- [PageCard](https://ui.nuxt.com/docs/components/page-card)
- [PageColumns](https://ui.nuxt.com/docs/components/page-columns)
- [PageCTA](https://ui.nuxt.com/docs/components/page-cta)
- [PageFeature](https://ui.nuxt.com/docs/components/page-feature)
- [PageGrid](https://ui.nuxt.com/docs/components/page-grid)
- [PageHeader](https://ui.nuxt.com/docs/components/page-header)
- [PageHero](https://ui.nuxt.com/docs/components/page-hero)
- [PageLinks](https://ui.nuxt.com/docs/components/page-links)
- [PageList](https://ui.nuxt.com/docs/components/page-list)
- [PageLogos](https://ui.nuxt.com/docs/components/page-logos)
- [PageSection](https://ui.nuxt.com/docs/components/page-section)
- [PricingPlan](https://ui.nuxt.com/docs/components/pricing-plan)
- [PricingPlans](https://ui.nuxt.com/docs/components/pricing-plans)
- [PricingTable](https://ui.nuxt.com/docs/components/pricing-table)

<note target="_blank" to="https://github.com/nuxt-ui-templates/saas">

Check out the **SaaS template** on GitHub for a real-life example.

</note>

## Dashboard

Specialized components for building dynamic dashboards with resizable panels, collapsible sidebars, toolbars, and search functionality.

- [DashboardGroup](https://ui.nuxt.com/docs/components/dashboard-group)
- [DashboardNavbar](https://ui.nuxt.com/docs/components/dashboard-navbar)
- [DashboardPanel](https://ui.nuxt.com/docs/components/dashboard-panel)
- [DashboardResizeHandle](https://ui.nuxt.com/docs/components/dashboard-resize-handle)
- [DashboardSearch](https://ui.nuxt.com/docs/components/dashboard-search)
- [DashboardSearchButton](https://ui.nuxt.com/docs/components/dashboard-search-button)
- [DashboardSidebar](https://ui.nuxt.com/docs/components/dashboard-sidebar)
- [DashboardSidebarCollapse](https://ui.nuxt.com/docs/components/dashboard-sidebar-collapse)
- [DashboardSidebarToggle](https://ui.nuxt.com/docs/components/dashboard-sidebar-toggle)
- [DashboardToolbar](https://ui.nuxt.com/docs/components/dashboard-toolbar)

<note target="_blank" to="https://github.com/nuxt-ui-templates/dashboard">

Check out the **Dashboard template** on GitHub for a real-life example.

</note>

## Chat

Components for building conversational interfaces and chatbots, powered by the **Vercel AI SDK**.

- [ChatMessage](https://ui.nuxt.com/docs/components/chat-message)
- [ChatMessages](https://ui.nuxt.com/docs/components/chat-messages)
- [ChatPalette](https://ui.nuxt.com/docs/components/chat-palette)
- [ChatPrompt](https://ui.nuxt.com/docs/components/chat-prompt)
- [ChatPromptSubmit](https://ui.nuxt.com/docs/components/chat-prompt-submit)

<note target="_blank" to="https://github.com/nuxt-ui-templates/chat">

Check out the **AI Chat template** on GitHub for a real-life example.

</note>

## Content

Components that integrate with [Content](/docs/getting-started/integrations/content) for documentation sites, including table of contents, search, navigation trees, and surrounding page links.

- [ContentNavigation](https://ui.nuxt.com/docs/components/content-navigation)
- [ContentSearch](https://ui.nuxt.com/docs/components/content-search)
- [ContentSearchButton](https://ui.nuxt.com/docs/components/content-search-button)
- [ContentSurround](https://ui.nuxt.com/docs/components/content-surround)
- [ContentToc](https://ui.nuxt.com/docs/components/content-toc)

<note target="_blank" to="https://github.com/nuxt-ui-templates/docs">

Check out the **Docs template** on GitHub for a real-life example.

</note>

## Color Mode

Components that integrate with [Color Mode](/docs/getting-started/integrations/color-mode) for theme switching between light, dark, and system preferences.

- [ColorModeAvatar](https://ui.nuxt.com/docs/components/color-mode-avatar)
- [ColorModeButton](https://ui.nuxt.com/docs/components/color-mode-button)
- [ColorModeImage](https://ui.nuxt.com/docs/components/color-mode-image)
- [ColorModeSelect](https://ui.nuxt.com/docs/components/color-mode-select)
- [ColorModeSwitch](https://ui.nuxt.com/docs/components/color-mode-switch)

## i18n

Components that integrate with [i18n](/docs/getting-started/integrations/i18n) for internationalization and locale management.

- [LocaleSelect](https://ui.nuxt.com/docs/components/locale-select)

What was missing

Component listings under each category (Layout, Element, Form, etc.)

Solution

Added handler in transformMDC() to:

  • Query components by category via queryCollection()
  • Convert to markdown list with links to each component
  • Made transformMDC() async to support DB queries

Changes

  • server/utils/transformMDC.ts: Added components-list handler, made async
  • server/routes/raw/[...slug].md.get.ts: Made transformMDC call async
  • server/plugins/llms.ts: Made transformMDC call async

@onmax onmax requested a review from benjamincanac as a code owner October 29, 2025 07:55
@github-actions github-actions bot added the v4 #4488 label Oct 29, 2025
@onmax onmax force-pushed the fix/copy-components-list branch from f591407 to 5fa5969 Compare October 29, 2025 08:00
@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 29, 2025

npm i https://pkg.pr.new/@nuxt/ui@5346

commit: a1d445a

@benjamincanac benjamincanac changed the title fix: expand components-list in raw markdown docs(llms): expand components-list in raw markdown Oct 29, 2025
@benjamincanac benjamincanac requested a review from HugoRCD October 29, 2025 09:26
.select('path', 'title')
.all()

const links = components.map((c: any) => `- [${c.title}](https://ui.nuxt.com${c.path})`).join('\n')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be better to use the /raw/docs routes for each component instead of the link to their documentation, as this page is primarily focused on LLM

Suggested change
const links = components.map((c: any) => `- [${c.title}](https://ui.nuxt.com${c.path})`).join('\n')
const links = components.map((c: any) => `- [${c.title}](https://ui.nuxt.com/raw${c.path}.md)`).join('\n')

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants