Дизайн-система Nuxt UI.

Nuxt UI Среда выполнения для самостоятельного проекта Vue в дизайн-системе

Используйте официальный способ интеграции с Vue

В этом примере @nuxt/ui 4.11.3 работает с Vue 3 и Vite. Это не приложение Nuxt с серверным рендерингом. Плагин Vite разрешает сгенерированные шаблоны интерфейса, автоматический импорт компонентов и псевдонимы фреймворка; плагин Vue регистрирует необходимую интеграцию среды выполнения. Полный пример включает оба плагина, чтобы не создавать вводящую в заблуждение конфигурацию, в которой пакет установлен, но #build или #imports не разрешаются.

• @nuxt/ui/vite обеспечивает интеграцию на этапе сборки.
• @nuxt/ui/vue-plugin обеспечивает регистрацию во время выполнения.
• UApp оборачивает дерево нативных компонентов.

Сохраните оболочку приложения и таблицу стилей

UApp оборачивает композицию. Таблица стилей импортирует Tailwind CSS и @nuxt/ui, а главная точка входа импортирует эту таблицу стилей перед монтированием приложения. Сборка создаёт реальные компоненты CSS и обеспечивает их поведение, а не статические имитации карточек и переключателей. Это конкретная конфигурация браузера для проверки библиотеки; приложению Nuxt следует использовать собственную документированную настройку модуля.

Nuxt UI Семантические цвета и варианты компонентов дизайн-системы

Используйте семантические цвета, а не скопированный зелёный

В конфигурации по умолчанию для primary и success используется зелёный, для secondary и info — синий, для warning — жёлтый, для error — красный, а для neutral — оттенки сланцевого. Нативные компоненты используют эти псевдонимы через цветовые свойства. Поэтому кнопка основного действия и нейтральная кнопка сброса с контуром представляют разные роли действий, не вводя пользовательскую палитру, которую ошибочно выдают за значение по умолчанию Nuxt UI.

Чётко обозначьте область применения темы оформления

Для этого примера только со светлой темой в плагине Vite задано colorMode:false. В справочной таблице перечислены соответствующие объявления цветов текста, поверхностей и границ для светлой темы. Это не означает, что те же буквальные значения используются и в тёмной теме. Если продукт добавляет переключение цветовой темы, включите выбранную интеграцию и проверьте совместную работу элементов управления, поверхностей и сохранённых настроек.

Nuxt UI Роли текста, поверхности и геометрия дизайн-системы

Разберитесь в связях семантических CSS

Для вспомогательного текста используется --ui-text-muted, ссылающийся на neutral-500; для основного заголовка — --ui-text-highlighted, ссылающийся на neutral-900. Переменные поверхностей и границ также ссылаются на настроенную шкалу нейтральных оттенков. Руководство сохраняет эти связи, а не сводит всё к нескольким несвязанным значениям hex: при изменении нейтральной палитры тема компонентов остаётся согласованной.

Отделяйте общие значения по умолчанию от решений для страницы

В этой версии общие значения --ui-radius и --ui-container составляют .25rem и 80rem соответственно. В исходном макете описания проекта выбрана максимальная внешняя ширина 1100px, две колонки с интервалом 24px и одна колонка при ширине меньше 700px. Для заголовка и вспомогательного текста используются фактические текстовые роли Tailwind. Эти решения для страницы заданы в предоставленном CSS, а не представлены как требования всей библиотеки.

Nuxt UI Компоновка полей и локальная валидация в дизайн-системе

Задайте каждому полю корректный контекст

UFormField добавляет видимую подпись и имя для UInput или UTextarea. В поле контекста также отображается число слов, вычисляемое по тексту без пробелов по краям. Для обоих элементов управления используется v-model, поэтому отображаемые значения и обработчик составления читают одни и те же refs. Текстовая область имеет удобное начальное число строк и автоматически меняет размер, позволяя введённому пользователем длинному тексту занимать больше места, а не обрезаться в неподвижном поле.

Проводите валидацию до составления результата

Nuxt UI Черновик на основе данных и предотвращение показа устаревшего состояния в дизайн-системе

Собирайте результат только из имеющегося текста

Результат объединяет указанные заголовок и контекст с необязательным статическим контрольным списком для публикации. Он обозначен как локальный черновик, а не ответ ИИ. Здесь нет вызова модели, ожидания загрузки или выдуманного сгенерированного содержимого. Необязательный контрольный список управляется нативным USwitch с логическим состоянием, и итоговый текст напрямую отражает выбранный вариант.

Сбрасывайте прежний результат при изменении данных

Наблюдатель Vue за заголовком, контекстом и контрольным списком удаляет ранее составленный результат после любого изменения. Затем значок состояния снова показывает «Ожидание текста». Это не позволяет устаревшему черновику выглядеть актуальным, пока пользователь редактирует новые данные. Число слов остаётся вычисляемым значением и потому всегда соответствует текущему контексту.

Nuxt UI Полные состояния пустого экрана и сброса в дизайн-системе

Сделайте панель ожидания полезной

До составления результата в правой карточке приводится полное объяснение того, что появится и как работают редактирование, конфиденциальность и сброс. Это не пустой блок. После составления в нём отображается весь текст черновика: сохраняются переносы строк и автоматический перенос текста. Значок повторяет состояние текстом, поэтому цвет не служит единственным сигналом.

Восстанавливайте заполненные примеры

Кнопка сброса примера восстанавливает исходный заголовок, весь контекст и включённый контрольный список, одновременно удаляя результат и ошибку. Она не оставляет пустой пример, в котором читателю приходится догадываться, какой текст должен быть. Проверка в браузере изменяет описание проекта, составляет результат и затем проверяет, что после сброса восстановлен полный исходный заголовок.

Nuxt UI Адаптивные карточки и перенос текста в дизайн-системе

Сохраняйте читаемость результата на узких экранах

При ширине меньше 700px две карточки выстраиваются в один столбец, а все поля ввода занимают доступную ширину. Для черновика используется pre-wrap, а не форматированный текст без переносов, поэтому длинные заголовки и предложения естественно переносятся на новую строку. Кнопки переносятся внутри своей группы действий. После реального редактирования и составления результата страница проверяется при ширине 280px, а также на телефонах, планшетах и настольных компьютерах.

Проверяйте состояние после нативных переходов

Для оформления переключателя используются нативные переходы между состояниями. Перед снимком состояния визуальная проверка ждёт завершения перехода, чтобы не принять промежуточный цвет ползунка или дорожки за конечное состояние. Функциональные проверки подтверждают действие логического значения: если переключатель выключен, контрольный список действительно удаляется из составленного текста.

Nuxt UI Полный проект Vue и Vite для системы дизайна

Используйте все пять предоставленных файлов

В примере используются App.vue, main.js, style.css, vite.config.mjs и index.html. Конфигурация включает @vitejs/plugin-vue и @nuxt/ui/vite; точка входа main устанавливает @nuxt/ui/vue-plugin. Одной установки @nuxt/ui и вставки App.vue недостаточно, чтобы получить полностью работоспособный проект. Зафиксированная конфигурация воспроизводит локальный предпросмотр с настоящими нативными компонентами и семантическими стилями.

1. Сохраните все пять предоставленных файлов в одной папке.
2. Установите зафиксированные зависимости.
3. Запустите Vite в этой папке.
4. Проверьте поведение при пустом вводе, изменении результата, удалении пункта из списка и сбросе.

Не смешивайте это исследование в браузере с развёртыванием

Nuxt UI Примеры компонентов системы дизайна

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