Vue Components

Specialized Vue components for enhanced content authoring and interactive documentation.

Vue components in Nuxt UI's typography system provide specialized functionality beyond standard markdown elements. These components enable rich, interactive content authoring using the MDC syntax, perfect for creating engaging documentation, tutorials, and content-rich applications.

Overview

Vue components extend your content capabilities with:

Interactive Elements

Badges, callouts, collapsibles, and other components that respond to user interaction.

Code Presentation

Advanced code display with grouping, previews, trees, and collapsible sections.

Layout Components

Cards, field groups, steps, and containers for organizing complex content.

UI Elements

Icons, keyboard shortcuts, tabs, and other interface elements for polished content.

Usage

Vue components are used within markdown content using the MDC syntax. They support props, slots, and full markdown content within their bodies:

::callout{icon="i-lucide-info" color="blue"}
This is a callout with an icon and custom color. You can use **markdown** formatting inside.
::

Component Categories

Content Enhancement

Components that add visual interest and improve content readability:

  • Badge - Display version numbers, status labels, or tags
  • Callout - Eye-catching context boxes with icons and colors
  • Card - Highlighted content blocks with optional links
  • CardGroup - Grid layouts for organizing multiple cards

Code & Technical Content

Specialized components for presenting code and technical information:

  • CodeGroup - Tabbed code blocks for multiple examples
  • CodePreview - Live previews alongside code examples
  • CodeTree - File structure visualization with code
  • CodeCollapse - Collapsible code sections for long examples

Interactive Elements

Components that respond to user interaction:

Documentation Tools

Components specifically designed for documentation and API references:

  • Field - Parameter and property documentation
  • FieldGroup - Grouped parameter lists
  • Steps - Sequential instruction guides
  • Icon - Inline icon display
  • Kbd - Keyboard shortcut visualization

Example Usage

Here's how Vue components work together to create rich content:

Follow these steps to set up your first Nuxt UI project.

Install Nuxt UI

pnpm add @nuxt/ui

Configure your project

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

Start building

Create your first component and start building amazing interfaces.

Best Practices

Component Composition

Combine components strategically for maximum impact:

::card-group
::card{title="Documentation" icon="i-lucide-book-open" to="/docs"}
Comprehensive guides and API references.
::

::card{title="Examples" icon="i-lucide-code" to="/examples"}
Live examples and code samples.
::

::card{title="Community" icon="i-lucide-users" to="/community"}
Join our growing community of developers.
::
::

Content Organization

Use structural components to organize complex information:

::field-group
::field{name="title" type="string" required}
The main heading for your page or component.
::

::field{name="description" type="string"}
Optional description providing additional context.
::

::field{name="icon" type="string"}
Icon name from the available icon sets.
::
::

Interactive Learning

Combine code and preview components for educational content:

::code-preview
::badge
New Feature
::

#code
```mdc
::badge
New Feature
::

Component Reference

Each Vue component has its own dedicated documentation page with:

  • Usage examples - Common patterns and use cases
  • Props reference - Complete API documentation
  • Theme customization - Styling and theming options

Browse the individual component pages to learn about specific features, configuration options, and advanced usage patterns.