Nuxt UI v4 Expertise

Activation Triggers

• Creating Vue components with UI elements

• Working with buttons, cards, modals, forms

• Implementing navigation, dropdowns, tooltips

• Building responsive layouts

• Adding loading states or skeletons

Component Reference

Buttons (UButton)

<!-- Variants --> <UButton>Default (solid)</UButton> <UButton variant="outline">Outline</UButton> <UButton variant="soft">Soft</UButton> <UButton variant="ghost">Ghost</UButton> <UButton variant="link">Link</UButton>

<!-- Colors --> <UButton color="primary">Primary</UButton> <UButton color="secondary">Secondary</UButton> <UButton color="success">Success</UButton> <UButton color="warning">Warning</UButton> <UButton color="error">Error</UButton>

<!-- Sizes --> <UButton size="xs">Extra Small</UButton> <UButton size="sm">Small</UButton> <UButton size="md">Medium (default)</UButton> <UButton size="lg">Large</UButton> <UButton size="xl">Extra Large</UButton>

<!-- With Icons --> <UButton icon="i-heroicons-arrow-right" trailing>Next</UButton> <UButton icon="i-heroicons-check" leading>Complete</UButton>

<!-- Loading State --> <UButton :loading="isLoading">Submit</UButton>

<!-- Disabled --> <UButton disabled>Disabled</UButton>

Cards (UCard)

<UCard> <template #header> <h3 class="text-lg font-semibold">Card Title</h3> </template>

<p>Card content goes here.</p>

<template #footer> <UButton>Action</UButton> </template> </UCard>

<!-- Variants --> <UCard variant="outline">Outline card</UCard> <UCard variant="soft">Soft background</UCard>

Badges (UBadge)

<UBadge>Default</UBadge> <UBadge color="success">Completed</UBadge> <UBadge color="warning">In Progress</UBadge> <UBadge color="error">Failed</UBadge>

<!-- Variants --> <UBadge variant="solid">Solid</UBadge> <UBadge variant="outline">Outline</UBadge> <UBadge variant="soft">Soft</UBadge>

Progress (UProgress)

<!-- Basic --> <UProgress :value="75" />

<!-- With Label --> <UProgress :value="75" :max="100"> <template #indicator="{ percent }"> {{ percent }}% </template> </UProgress>

<!-- Colors --> <UProgress :value="75" color="success" /> <UProgress :value="30" color="warning" />

Accordion (UAccordion)

<UAccordion :items="items" />

<script setup> const items = [ { label: 'Phase 1: SDLC', icon: 'i-heroicons-academic-cap', content: 'Learn Software Development Life Cycle...', defaultOpen: true }, { label: 'Phase 2: Foundations', icon: 'i-heroicons-command-line', content: 'Master Linux, Git, and networking basics...' } ] </script>

Modal (UModal)

<UButton @click="isOpen = true">Open Modal</UButton>

<UModal v-model:open="isOpen"> <template #header> <h3>Modal Title</h3> </template>

<p>Modal content here.</p>

<template #footer> <UButton variant="outline" @click="isOpen = false">Cancel</UButton> <UButton @click="handleConfirm">Confirm</UButton> </template> </UModal>

Checkbox & Radio

<!-- Checkbox --> <UCheckbox v-model="isChecked" label="Mark as complete" />

<!-- Radio Group --> <URadioGroup v-model="selected" :items="options" />

<script setup> const options = [ { label: 'Option A', value: 'a' }, { label: 'Option B', value: 'b' }, { label: 'Option C', value: 'c' } ] </script>

Skeleton (Loading States)

<!-- Text skeleton --> <USkeleton class="h-4 w-32" />

<!-- Multiple lines --> <div class="space-y-2"> <USkeleton class="h-4 w-full" /> <USkeleton class="h-4 w-3/4" /> <USkeleton class="h-4 w-1/2" /> </div>

<!-- Card skeleton --> <UCard> <USkeleton class="h-48 w-full rounded-lg" /> <div class="mt-4 space-y-2"> <USkeleton class="h-4 w-3/4" /> <USkeleton class="h-4 w-1/2" /> </div> </UCard>

Tooltip

<UTooltip text="This is a helpful tip"> <UButton>Hover me</UButton> </UTooltip>

Dropdown Menu

<UDropdownMenu :items="menuItems"> <UButton icon="i-heroicons-ellipsis-vertical" variant="ghost" /> </UDropdownMenu>

<script setup> const menuItems = [ [ { label: 'Edit', icon: 'i-heroicons-pencil' }, { label: 'Duplicate', icon: 'i-heroicons-document-duplicate' } ], [ { label: 'Delete', icon: 'i-heroicons-trash', color: 'error' } ] ] </script>

Breadcrumb

<UBreadcrumb :items="breadcrumbs" />

<script setup> const breadcrumbs = [ { label: 'Home', to: '/' }, { label: 'Phase 1', to: '/phase-1-sdlc' }, { label: 'SDLC Models', to: '/phase-1-sdlc/sdlc-models' }, { label: 'Waterfall Model' } ] </script>

Navigation Menu

<UNavigationMenu :items="navItems" />

<script setup> const navItems = [ { label: 'Phases', children: [ { label: 'Phase 1: SDLC', to: '/phase-1-sdlc' }, { label: 'Phase 2: Foundations', to: '/phase-2-foundations' } ] } ] </script>

Icons

Nuxt UI uses Heroicons by default. Use the i-heroicons-* prefix:

<!-- Outline (default) --> <UIcon name="i-heroicons-check" /> <UIcon name="i-heroicons-x-mark" /> <UIcon name="i-heroicons-arrow-right" /> <UIcon name="i-heroicons-academic-cap" />

<!-- Solid --> <UIcon name="i-heroicons-check-solid" />

<!-- Common icons for LMS --> i-heroicons-academic-cap <!-- Learning/education --> i-heroicons-book-open <!-- Lessons --> i-heroicons-check-circle <!-- Completed --> i-heroicons-play-circle <!-- Start/continue --> i-heroicons-clock <!-- Duration --> i-heroicons-chart-bar <!-- Progress --> i-heroicons-trophy <!-- Achievement --> i-heroicons-document-text <!-- Content --> i-heroicons-question-mark-circle <!-- Quiz -->

Theme Configuration

// app.config.ts export default defineAppConfig({ ui: { colors: { primary: 'indigo', secondary: 'slate', success: 'green', warning: 'amber', error: 'red' } } })

Common Patterns

Card with Progress

<UCard> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold">Phase 1: SDLC</h3> <UBadge color="success">4/5 Complete</UBadge> </div> <UProgress :value="80" color="success" class="mb-4" /> <UButton block>Continue Learning</UButton> </UCard>

Empty State

<div class="text-center py-12"> <UIcon name="i-heroicons-document-text" class="w-12 h-12 mx-auto text-gray-400" /> <h3 class="mt-4 text-lg font-medium">No lessons yet</h3> <p class="mt-2 text-gray-400">Start by selecting a topic from the sidebar.</p> <UButton class="mt-4">Browse Topics</UButton> </div>

Loading Card

<UCard v-if="loading"> <USkeleton class="h-6 w-1/2 mb-4" /> <USkeleton class="h-4 w-full mb-2" /> <USkeleton class="h-4 w-3/4" /> </UCard> <UCard v-else> <!-- Actual content --> </UCard>

Best Practices

• Always use Nuxt UI components instead of raw HTML for consistency

• Use the color prop instead of custom Tailwind colors

• Provide loading states with USkeleton for async content

• Use icons consistently from Heroicons set

• Leverage slots (header, footer, default) for flexible layouts

• Add cursor-pointer class to custom clickable elements (UButton handles this automatically)