Nuxt UI Design System.

Nuxt UI Design System Standalone Vue Runtime

Use the official Vue integration path

This study runs @nuxt/ui 4.11.3 inside Vue 3 with Vite. It is not a Nuxt server-rendered application. The Vite plugin resolves the generated UI templates, auto component imports and framework aliases; the Vue plugin registers the required runtime integration. The complete example includes both, avoiding a misleading setup that installs a package but leaves #build or #imports unresolved.

• @nuxt/ui/vite supplies build-time integration.
• @nuxt/ui/vue-plugin supplies runtime registration.
• UApp wraps the native component tree.

Keep the application wrapper and stylesheet

UApp wraps the composition. The stylesheet imports Tailwind CSS and @nuxt/ui, and the main entry imports that stylesheet before mounting the application. The build produces real component CSS and behavior rather than static approximations of cards and switches. This is a concrete browser setup for inspecting the library; a Nuxt application should use its own documented module setup.

Nuxt UI Design System Semantic Colors and Component Variants

Use semantic colors rather than a copied green

The default configuration maps primary and success to green, secondary and info to blue, warning to yellow, error to red and neutral to slate. Native components consume those aliases through their color props. The primary compose button and neutral outlined reset button therefore represent distinct action roles without introducing a custom palette that is falsely described as a Nuxt UI default.

Keep the appearance scope explicit

The Vite plugin is configured with colorMode:false for this light-only study. The reference table lists the corresponding light text, surface and border declarations. It does not claim that those literal values are also the dark theme. A product adding color mode should enable its chosen integration and verify its controls, surfaces and saved preferences together.

Nuxt UI Design System Text Roles, Surfaces and Geometry

Read the semantic CSS relationships

Support copy uses --ui-text-muted, which points to neutral-500; the main heading uses --ui-text-highlighted, which points to neutral-900. Surface and border variables similarly reference the configured neutral scale. The guide preserves those relationships rather than flattening everything into a few unrelated hex values, so changing the neutral palette still produces a coherent component theme.

Separate shared defaults from page decisions

The shared --ui-radius is .25rem and --ui-container is 80rem in this version. The original brief layout instead chooses an 1100px outer maximum, two columns with a 24px gap and a single column below 700px. Tailwind’s actual text roles supply the headline and supporting sizes. Those page decisions are in the supplied CSS, not invented library-wide requirements.

Nuxt UI Design System Field Composition and Local Validation

Give every input a real field context

UFormField supplies a visible label and name around UInput or UTextarea. The context field also shows a word count derived from its trimmed contents. Both controls use v-model, so the displayed values and the composition handler read the same refs. The textarea has a useful initial row count and autoresize, allowing longer user content to grow instead of disappearing into a clipped fixed box.

Validate before composing

Nuxt UI Design System Derived Draft and Stale-State Prevention

Assemble only the text that is present

The output combines the supplied title and context with an optional static sharing checklist. The result says it is a local draft rather than an AI response. There is no model call, loading delay or invented generated content. The optional checklist is controlled through a native USwitch boolean, and the assembled text reflects that choice directly.

Clear an old result when inputs change

A Vue watch on the title, context and checklist removes the previous composed result after any edit. The status badge then returns to Waiting for your text. This prevents a stale draft from appearing current while the user is editing new inputs. The word count remains a computed value, so it cannot drift away from the current context.

Nuxt UI Design System Complete Empty and Reset States

Make the waiting panel useful

Before composition, the right card contains a full explanation of what will appear and how editing, privacy and reset work. It is not an empty content module. Once composed, that space displays the complete readable draft with preserved line breaks and wrapping. The badge repeats the state in text, so color is not the only signal.

Reset to complete sample inputs

Reset sample restores the original title, full context and enabled checklist while clearing the result and any error. It does not leave a blank demonstration requiring the reader to guess what content belongs there. The browser check composes a changed brief and then verifies that the full sample title returns after reset.

Nuxt UI Design System Responsive Cards and Text Flow

Keep the result readable at narrow widths

The two cards become one column below 700px, and all inputs use the available width. The draft uses pre-wrap rather than an unwrappable preformatted line, so a long title or sentence can wrap naturally. Buttons wrap within their action group. The page is checked at 280px as well as phone, tablet and desktop sizes after a real edit and composition.

Inspect state after native transitions

Switch styling includes its native state transition. The visual check waits before capturing the result so it does not mistake an intermediate thumb or track color for the settled state. Functional checks verify the boolean effect by confirming that an unchecked switch actually removes the checklist from the composed text.

Nuxt UI Design System Complete Vue and Vite Project

Use all five supplied files

The example provides App.vue, main.js, style.css, vite.config.mjs and index.html. The configuration includes @vitejs/plugin-vue and @nuxt/ui/vite; the main entry installs @nuxt/ui/vue-plugin. Installing only @nuxt/ui and pasting App.vue is not a complete runnable project. The pinned setup reproduces the local preview with its actual native components and semantic styles.

1. Save all five supplied files together.
2. Install the pinned dependencies.
3. Run Vite in that directory.
4. Test missing input, edited output, checklist removal and reset.

Keep this browser study separate from deployment

Nuxt UI Design System Component Examples

<script setup>
import{ref,computed,watch}from'vue';
const title=ref('A calmer project handoff'),context=ref('Help a small team understand what is ready, what needs a decision, and who owns the next step.'),checklist=ref(true),error=ref(''),brief=ref('');const words=computed(()=>context.value.trim()?context.value.trim().split(/\s+/).length:0);watch([title,context,checklist],()=>{brief.value='';error.value=''});function compose(){if(!title.value.trim()||!context.value.trim()){error.value='Add both a title and context before composing.';return}brief.value=title.value.trim()+'\n\nPurpose\n'+context.value.trim()+(checklist.value?'\n\nBefore sharing\n• Name the next decision.\n• Identify an owner.\n• Include the source materials.':'')+'\n\nThis is a local draft, not a generated AI response.';}function reset(){title.value='A calmer project handoff';context.value='Help a small team understand what is ready, what needs a decision, and who owns the next step.';checklist.value=true;brief.value='';error.value=''}
</script>
<template><UApp><main><p class="text-primary font-semibold text-sm">NUXT UI / ORIGINAL BRIEF COMPOSER</p><h1 class="text-4xl font-bold tracking-tight mt-4 text-highlighted">Put the next step into words.</h1><p class="text-muted mt-5 max-w-2xl leading-7">A local composition tool using Nuxt UI 4.11.3 in a standalone Vue application. The preview assembles your text; it does not call an AI model.</p><div class="layout"><UCard><template #header><h2 class="font-semibold text-xl">Write the essentials</h2></template><div class="stack"><UFormField label="Brief title" name="title"><UInput v-model="title" class="w-full" placeholder="Name the work" aria-label="Brief title"/></UFormField><UFormField label="Context" name="context" :description="words+' words in your context'"><UTextarea v-model="context" class="w-full" autoresize :rows="5" placeholder="What should the next person understand?" aria-label="Context"/></UFormField><USwitch v-model="checklist" label="Include the sharing checklist"/><p v-if="error" role="alert" class="text-error text-sm">{{error}}</p><div class="flex flex-wrap gap-3"><UButton @click="compose">Compose local brief</UButton><UButton color="neutral" variant="outline" @click="reset">Reset sample</UButton></div></div></UCard><UCard><template #header><div class="flex justify-between gap-3 flex-wrap"><h2 class="font-semibold text-xl">Readable draft</h2><UBadge :color="brief?'success':'neutral'" variant="subtle">{{brief?'Composed locally':'Waiting for your text'}}</UBadge></div></template><div v-if="brief" class="brief" role="status">{{brief}}</div><div v-else class="space-y-4 text-muted leading-7"><p>Your draft will keep the title and context you provide, with an optional sharing checklist.</p><ul class="list-disc pl-5 space-y-2"><li>Editing any input clears an older composed result.</li><li>No content leaves the browser.</li><li>Reset returns to the complete sample inputs.</li></ul></div></UCard></div><p class="notes text-muted">Actual UCard, UFormField, UInput, UTextarea, USwitch, UButton and UBadge components with Nuxt UI’s default semantic theme. Original application content and state; this example uses Vue/Vite, not a Nuxt server.</p></main></UApp></template>

import{createApp}from'vue';import ui from'@nuxt/ui/vue-plugin';import App from'./App.vue';import './style.css';createApp(App).use(ui).mount('#app');

@import 'tailwindcss';
@import '@nuxt/ui';
body{margin:0}*{box-sizing:border-box}main{max-width:1100px;margin:auto;padding:32px}.layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}.stack{display:grid;gap:24px}.brief{white-space:pre-wrap;line-height:1.7;overflow-wrap:anywhere}.notes{font-size:13px;line-height:1.6;margin-top:24px}@media(max-width:700px){main{padding:16px}.layout{grid-template-columns:1fr}}textarea{min-height:150px}button{max-width:100%}

import{defineConfig}from'vite';import vue from'@vitejs/plugin-vue';import ui from'@nuxt/ui/vite';export default defineConfig({plugins:[vue(),ui({colorMode:false})],base:'./',build:{cssCodeSplit:false}});

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Project brief composer</title></head><body><div id="app"></div><script type="module" src="./main.js"></script></body></html>