Sistema de design Nuxt UI.

Nuxt UI: ambiente de execução Vue independente do sistema de design

Use o caminho oficial de integração com Vue

Este estudo executa @nuxt/ui 4.11.3 com Vue 3 e Vite. Não é um aplicativo Nuxt renderizado no servidor. O plugin do Vite resolve os modelos de UI gerados, a importação automática de componentes e os aliases do framework; o plugin do Vue registra a integração necessária em tempo de execução. O exemplo completo inclui ambos, evitando uma configuração enganosa que instala um pacote, mas deixa #build ou #imports sem resolução.

• @nuxt/ui/vite fornece integração em tempo de compilação.
• @nuxt/ui/vue-plugin fornece o registro em tempo de execução.
• UApp envolve a árvore de componentes nativos.

Mantenha o componente raiz do aplicativo e a folha de estilos

UApp envolve a composição. A folha de estilos importa Tailwind CSS e @nuxt/ui, e a entrada principal importa essa folha antes de montar o aplicativo. A compilação gera componentes CSS reais e comportamentos, em vez de aproximações estáticas de cartões e interruptores. Esta é uma configuração concreta no navegador para inspecionar a biblioteca; um aplicativo Nuxt deve usar a configuração de módulo própria, conforme a documentação.

Nuxt UI: cores semânticas e variantes de componentes do sistema de design

Use cores semânticas em vez de copiar um tom de verde

A configuração padrão associa primary e success a verde, secondary e info a azul, warning a amarelo, error a vermelho e neutral a cinza-ardósia. Os componentes nativos usam esses aliases por meio das propriedades de cor. Assim, o botão principal de composição e o botão neutro de redefinição com contorno representam funções de ação distintas, sem introduzir uma paleta personalizada que seja apresentada incorretamente como padrão de Nuxt UI.

Deixe explícito o escopo da aparência

O plugin do Vite está configurado com colorMode:false para este estudo somente com tema claro. A tabela de referência lista as declarações correspondentes para texto, superfície e borda no tema claro. Ela não afirma que esses valores literais também se aplicam ao tema escuro. Um produto que adicione modo de cor deve habilitar a integração escolhida e verificar em conjunto os controles, as superfícies e as preferências salvas.

Nuxt UI: papéis do texto, superfícies e geometria do sistema de design

Entenda as relações semânticas de CSS

O texto de apoio usa --ui-text-muted, associado a neutral-500; o título principal usa --ui-text-highlighted, associado a neutral-900. As variáveis de superfície e borda também fazem referência à escala de neutros configurada. O guia preserva essas relações em vez de reduzir tudo a alguns valores hexadecimais sem conexão, para que a alteração da paleta de neutros mantenha um tema de componentes coerente.

Separe os padrões compartilhados das decisões da página

Nesta versão, --ui-radius compartilhado é .25rem e --ui-container é 80rem. Já o layout original do briefing escolhe um limite externo de 1100px, duas colunas com espaçamento de 24px e uma única coluna abaixo de 700px. Os papéis de texto reais do Tailwind definem os tamanhos do título e do texto de apoio. Essas decisões de página estão no CSS fornecido, não são requisitos inventados para toda a biblioteca.

Nuxt UI: composição de campos e validação local no sistema de design

Forneça um contexto de campo real para cada entrada

UFormField fornece um rótulo visível e um nome para UInput ou UTextarea. O campo de contexto também mostra uma contagem de palavras calculada com base no conteúdo sem espaços externos. Os dois controles usam v-model, portanto os valores exibidos e o manipulador de composição leem as mesmas refs. A área de texto tem uma quantidade inicial de linhas adequada e redimensionamento automático, permitindo que conteúdos mais longos cresçam em vez de ficarem ocultos em uma caixa fixa e cortada.

Valide antes de compor

Nuxt UI: prevenção de rascunhos desatualizados no sistema de design

Monte apenas o texto que estiver presente

A saída combina o título e o contexto fornecidos com uma lista estática opcional para compartilhamento. O resultado informa que é um rascunho local, não uma resposta de IA. Não há chamada a um modelo, atraso de carregamento nem conteúdo gerado inventado. A lista opcional é controlada por um USwitch nativo com valor booleano, e o texto montado reflete diretamente essa escolha.

Limpe resultados antigos quando as entradas mudarem

Um watch do Vue que observa o título, o contexto e a lista remove o resultado composto anterior após qualquer edição. O indicador de status volta então a Aguardando seu texto. Isso evita que um rascunho desatualizado pareça atual enquanto o usuário edita novas entradas. A contagem de palavras continua sendo um valor computado, para permanecer sempre sincronizada com o contexto atual.

Nuxt UI: estados vazios e de redefinição completos no sistema de design

Torne útil o painel de espera

Antes da composição, o cartão à direita contém uma explicação completa do que será exibido e de como funcionam a edição, a privacidade e a redefinição. Não é um módulo de conteúdo vazio. Depois da composição, esse espaço exibe o rascunho completo e legível, preservando as quebras de linha e a quebra automática de texto. O indicador repete o estado em texto, para que a cor não seja o único sinal.

Restaure todos os dados de exemplo

A ação Redefinir exemplo restaura o título original, o contexto completo e a lista ativada, além de limpar o resultado e qualquer erro. Ela não deixa uma demonstração em branco que obrigue o leitor a adivinhar que conteúdo deveria estar ali. A verificação no navegador compõe um briefing editado e, em seguida, confirma que o título de exemplo completo retorna após a redefinição.

Nuxt UI: cartões responsivos e fluxo de texto no sistema de design

Mantenha o resultado legível em telas estreitas

Os dois cartões passam a uma única coluna abaixo de 700px, e todos os campos de entrada usam a largura disponível. O rascunho usa pre-wrap, em vez de uma linha pré-formatada que não pode quebrar, para que títulos e frases longos sejam distribuídos naturalmente em várias linhas. Os botões quebram linha dentro do grupo de ações. A página é verificada em 280px, além dos tamanhos de celular, tablet e desktop, após uma edição e composição reais.

Inspecione o estado após as transições nativas

O estilo do interruptor inclui sua transição nativa de estado. A verificação visual aguarda antes de capturar o resultado, para não confundir uma posição intermediária do botão ou uma cor transitória da trilha com o estado final. As verificações funcionais confirmam o efeito do valor booleano, verificando se um interruptor desmarcado realmente remove a lista do texto composto.

Nuxt UI: projeto completo em Vue e Vite do sistema de design

Use os cinco arquivos fornecidos

O exemplo fornece App.vue, main.js, style.css, vite.config.mjs e index.html. A configuração inclui @vitejs/plugin-vue e @nuxt/ui/vite; a entrada principal instala @nuxt/ui/vue-plugin. Instalar apenas @nuxt/ui e colar App.vue não constitui um projeto executável completo. A configuração com versões fixadas reproduz a pré-visualização local com seus componentes nativos e estilos semânticos reais.

1. Salve juntos os cinco arquivos fornecidos.
2. Instale as dependências com versões fixadas.
3. Execute o Vite nesse diretório.
4. Teste entradas ausentes, saída editada, remoção da lista e redefinição.

Mantenha este estudo no navegador separado da implantação

Nuxt UI: exemplos de componentes do sistema de design

<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>