Skip to content

Conversation

@onmax
Copy link
Contributor

@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
@benjamincanac benjamincanac merged commit fc0223a into nuxt:v4 Oct 31, 2025
16 checks passed
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