Nuxt UI — интуитивная библиотека компонентов для Vue-приложений

Создание Vue-приложения с нуля означает принятие десятков решений ещё до написания первой строки бизнес-логики: какую библиотеку компонентов использовать, как обеспечить доступность, будет ли ваша дизайн-система масштабируемой и насколько тесно она должна быть связана с фреймворком. Nuxt UI отвечает на большинство этих вопросов ещё до того, как вы откроете редактор.

Что такое Nuxt UI?

Nuxt UI — это бесплатная open-source библиотека компонентов для Vue, построенная на трёх ключевых технологиях:

• Reka UI — headless-примитивы с поддержкой доступности, которые из коробки обеспечивают навигацию с клавиатуры, управление фокусом и поддержку программ чтения с экрана
• Tailwind CSS — utility-first стилизация с CSS-first моделью конфигурации
• Tailwind Variants — типобезопасное API для управления вариантами компонентов и аккуратного разрешения конфликтов стилей

Результат — более 125 готовых к production компонентов, доступных по умолчанию, визуально отполированных и легко настраиваемых.

Важное уточнение: несмотря на название, Nuxt UI не является эксклюзивным для Nuxt. Он одинаково хорошо работает в любом Vue-проекте через Vite-плагин. Если вы разрабатываете на чистом Vue, Vue Router и Vite, настройка займёт всего несколько строк конфигурации.

Место Nuxt UI в экосистеме Vue

При оценке библиотеки компонентов для Vue настоящий вопрос не «достаточно ли в ней компонентов?», а «подходит ли она к тому, как я реально разрабатываю?».

Вот как Nuxt UI выглядит на фоне распространённых альтернатив:

Если ваш стек уже включает Tailwind CSS и вам нужны высокоуровневые компоненты — таблицы данных, формы, оверлеи, навигация — без необходимости создавать их самостоятельно, Nuxt UI станет естественным выбором.

Начало работы: установка

Для Nuxt-проектов добавьте модуль в nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Затем оберните приложение в UApp и импортируйте стили в CSS-файле:

@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Для стандартных Vue + Vite проектов настройте Vite-плагин:

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

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

Затем зарегистрируйте плагин в main.ts и импортируйте те же CSS-стили. Компоненты и composables автоматически импортируются глобально в обеих конфигурациях.

Ключевые возможности, о которых стоит знать

Доступность без дополнительных усилий. Поскольку Nuxt UI построен на Reka UI, сложные компоненты — модальные окна, вкладки, выпадающие меню — автоматически обрабатывают ARIA-атрибуты, удержание фокуса и взаимодействие с клавиатурой. Тестировать в контексте всё ещё нужно, но фундамент прочный.

TypeScript везде. Каждое свойство, слот и событие компонента имеют типы. Темизация через app.config.ts типобезопасна, а props компонентов, слоты и composables полностью типизированы по всей библиотеке.

Темизация, которая не сопротивляется вам. Nuxt UI v4 использует CSS-first модель конфигурации. Настройка цветов, размеров и вариантов происходит в CSS или app.config.ts — никаких JavaScript-конфигов, с которыми приходится бороться.

Более 125 компонентов в 13 категориях, включая специализированные группы для дашбордов, AI-чат интерфейсов, rich text редактирования и интеграции с Nuxt Content — областей, где большинство Tailwind CSS Vue библиотек не предлагают ничего.

Когда Nuxt UI — правильный выбор

Nuxt UI имеет смысл выбирать, когда вам нужны:

• Tailwind-native компоненты, не требующие отдельной системы дизайн-токенов
• Доступность, обеспеченная на уровне примитивов, а не прикрученная задним числом
• UI-компоненты для Nuxt 4 с first-class поддержкой SSR, i18n и цветовых режимов
• Бесплатная библиотека под лицензией MIT без платных компонентов (Nuxt UI Pro был объединён с основной библиотекой в v4)

Она менее подходит, если вам нужен Material Design, вы предпочитаете копировать исходный код компонентов в свой репозиторий (тогда рассмотрите shadcn-vue) или вы разрабатываете кросс-платформенные приложения для мобильных устройств и десктопа (тогда рассмотрите Quasar).

Заключение

Nuxt UI устраняет «налог на каркас», замедляющий ранние этапы разработки на Vue. С доступными компонентами, целостной дизайн-системой и встроенным TypeScript вы можете сосредоточиться на том, что ваше приложение действительно делает, вместо того чтобы заново создавать примитивы.

Начните с официальной документации или клонируйте один из готовых шаблонов — Dashboard, SaaS, Landing или Starter — и получите работающее приложение за считанные минуты.

FAQ

Можно ли использовать Nuxt UI без Nuxt?

Да. Несмотря на то, что название предполагает обратное, Nuxt UI поставляется с Vite-плагином, который работает в любом стандартном Vue 3 проекте. Вы устанавливаете пакет, регистрируете плагин в vite.config.ts и импортируете CSS. Компоненты и composables импортируются автоматически так же, как и в Nuxt-приложении.

Является ли Nuxt UI Pro по-прежнему отдельным платным продуктом?

Нет. Начиная с версии 4, Nuxt UI Pro был объединён с основной open-source библиотекой под лицензией MIT. Компоненты, ранее доступные только в платном тарифе, включая макеты дашбордов, продвинутые таблицы данных и блоки для лендингов, теперь свободно доступны всем пользователям без какой-либо подписки или лицензионных отчислений.

Как Nuxt UI сравнивается с shadcn-vue?

Обе библиотеки используют примитивы Reka UI и Tailwind CSS, поэтому доступность и стилизация схожи. Ключевое различие — в способе поставки: shadcn-vue копирует исходный код компонентов в ваш репозиторий для полного владения, тогда как Nuxt UI устанавливается как зависимость с темизацией через конфигурацию. Выбирайте shadcn-vue для контроля над исходным кодом, а Nuxt UI — для более быстрых обновлений и меньших накладных расходов на сопровождение.

Поддерживает ли Nuxt UI тёмную тему и интернационализацию?

Да, и то и другое. Поддержка цветовых режимов является first-class: компоненты автоматически адаптируются к светлой и тёмной темам через CSS-переменные. Интернационализация поддерживается через встроенную конфигурацию локалей и интеграцию с такими инструментами, как @nuxtjs/i18n, что позволяет переводить строки компонентов — например, метки пагинации и сообщения форм.