Суть паттернов UI/UX можно свести к трём ключевым принципам, которые работают в любом стеке.

1️⃣ Первый - принцип специализации (UI). Используй самый подходящий инструмент для задачи. Если нужен числовой ввод, то бери компонент, заточенный именно под числа, а не универсальное поле.

Если контейнер умеет сам отрисовывать заголовок - передавай его свойством, не верстай вручную. Это делает интерфейс предсказуемым, а код - чище.

Паттерн согласованности (UI/UX) здесь же: используй централизованные токены для цветов (text-muted, bg-default) и иконок, а не хардкод. Это даёт единый визуальный язык и меняется правкой в одном месте.

2️⃣ Второй - принцип декларативности (UI/UX). Описывай что нужно, а не как это сделать. Не пиши ручные слоты для каждого простого фильтра в таблице - опиши их массивом: { name: ‘city’, label: ‘Город’, render: ‘Select’ }. Система сама сгенерирует нужные поля. Это же касается данных: используй transform в запросах к API, чтобы сразу получать готовую для работы структуру, избегая повторяющегося извлечения data.items[0] по всему коду.

3️⃣ Третий - принцип экономии взаимодействия (UX). Убирай всё лишнее, что заставляет пользователя или разработчика делать лишний шаг. Не дублируй :disabled на каждом поле формы - поставь его один раз на контейнер. Не оборачивай грид в лишний div с отступами, если они уже есть. Паттерн прогрессивного раскрытия (UX) здесь же: кнопки действий в формах показывай только в режиме редактирования, а не всегда.

❕ Главный вывод: эти паттерны - не про запоминание конкретных примеров из Nuxt UI или Vue. Они про мышление. Перед тем как написать код, спроси себя: «Это самый прямой и специализированный способ? Я описал намерение, а не механику? Убрал ли я всё, что можно убрать без потери смысла?». Такой подход превращает вёрстку из набора тегов в проектирование опыта и для пользователя, и для того, кто будет поддерживать код после тебя. #ui #ux #js