Nuxt UI v3

Мы рады объявить о выходе Nuxt UI v3 — полном редизайне нашей UI-библиотеки с заметными улучшениями доступности, производительности и опыта разработчика. В этом крупном обновлении — более 1500 коммитов от команды и сообщества.

🚀 Переосмысление с нуля

Nuxt UI v3 — большой шаг вперёд в нашей цели дать разработчикам Vue и Nuxt максимально полный UI-инструментарий. Версия переписана с нуля с учётом современных технологий и лучших практик.

От HeadlessUI к Reka UI

В основе Nuxt UI v3 теперь Reka UI:

• Корректная клавиатурная навигация во всех интерактивных компонентах

• ARIA-атрибуты выставляются автоматически

• Управление фокусом работает из коробки

• Компоненты дружелюбны к скринридерам

Вы можете делать приложения, удобные для всех, без углубления в тонкости доступности.

Интеграция с Tailwind CSS v4

Поддержка Tailwind CSS v4 даёт серьёзный прирост производительности:

• До 5× быстрее рантайм за счёт оптимизированного рендеринга компонентов

• До 100× быстрее сборка благодаря новому CSS-first движку

• Меньший размер бандла и более эффективные стили

Приложения будут отзывчивее, сборка — быстрее, загрузка — легче.

🎨 Новая дизайн-система

<!-- Было: дублирование классов для тёмной темы -->
<div class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg">
  <h2 class="text-gray-900 dark:text-white text-xl mb-2">Профиль пользователя</h2>
  <p class="text-gray-600 dark:text-gray-300">Настройки и предпочтения</p>
  <button class="bg-blue-500 text-white px-3 py-1 rounded mt-2">Редактировать</button>
</div>

<!-- Стало: семантические токены и автоматическая тёмная тема -->
<div class="bg-muted p-4 rounded-lg">
  <h2 class="text-highlighted text-xl mb-2">Профиль пользователя</h2>
  <p class="text-muted">Настройки и предпочтения</p>
  <UButton color="primary" size="sm" class="mt-2">Редактировать</UButton>
</div>

Новая цветовая система включает 7 семантических алиасов:

Так код проще поддерживать, а интерфейс — согласованнее, особенно в команде. Светлая и тёмная темы переключаются без дублирования классов.

💚 Полная совместимость с Vue

Мы расширяем Nuxt UI за пределы Nuxt: в v3 и Nuxt UI, и Nuxt UI Pro корректно работают в любом Vue-проекте. То есть можно:

• Использовать одни и те же компоненты во всех Vue-проектах

• Подключать систему тем Nuxt UI в любом Vue-приложении

• Получать автоимпорты и поддержку TypeScript вне Nuxt

• Использовать базовые и Pro-компоненты в любом Vue-проекте

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui()
  ]
})

📦 Компоненты на все случаи

54 базовых компонента, 50 Pro и 42 Prose покрывают практически любые задачи:

• Данные: таблицы, графики и визуализации под ваши данные

• Навигация: меню, вкладки и «хлебные крошки»

• Обратная связь: тосты, алерты и модалки

• Формы: поля, селекты и валидация

• Сетка: контейнеры и адаптивная вёрстка

Компоненты выглядят аккуратно из коробки и при этом гибко настраиваются.

🔷 Улучшенная интеграция TypeScript

Переработана работа с TypeScript для большей продуктивности:

• Полная типизация и удобный автокомплит
• Дженерики в компонентах для гибких API
• Типобезопасная темизация через единый API

export default defineAppConfig({
  ui: {
    button: {
      slots: {
        base: 'font-bold rounded-lg'
      },
      defaultVariants: {
        size: 'md',
        color: 'error'
      }
    }
  }
})

⬆️ Переход на v3

Подготовлено руководство по миграции с v2 на v3. Из-за полного переписывания есть breaking changes, но мы постарались сделать переход максимально плавным.

🎯 Начало работы

Создать новый проект или обновить существующий легко:

# Новый Nuxt-проект с Nuxt UI
npx nuxi@latest init my-app -t ui

pnpm add @nuxt/ui@latest

yarn add @nuxt/ui@latest

npm install @nuxt/ui@latest

bun add @nuxt/ui@latest

За подробностями по компонентам и возможностям Nuxt UI v3 смотрите документацию.

🙏 Благодарности

Этот релиз — тысячи часов работы команды и сообщества. Спасибо всем, кто помог сделать Nuxt UI v3 реальностью.

Ждём, что вы построите с Nuxt UI v3! 🚀