Vue Components
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:
- Accordion - Expandable content sections
- Collapsible - Simple show/hide content areas
- Tabs - Tabbed content organization
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:
Install Nuxt UI
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
Configure your project
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
Start building
Create your first component and start building amazing interfaces.
::callout{icon="i-lucide-rocket" color="primary"}
Follow these steps to set up your first Nuxt UI project.
::
::steps{level="4"}
#### Install Nuxt UI
:::code-group{sync="pm"}
```bash [pnpm]
pnpm add @nuxt/ui
```
```bash [yarn]
yarn add @nuxt/ui
```
```bash [npm]
npm install @nuxt/ui
```
```bash [bun]
bun add @nuxt/ui
```
:::
#### Configure your project
```ts [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.