Release· 22 сентября 2025 г.

Nuxt UI v4

Nuxt UI v4 объединяет Nuxt UI и Nuxt UI Pro в одну бесплатную библиотеку: 110+ компонентов, 12 шаблонов и Figma kit.

Benjamin Canac

@benjamincanac

Sébastien Chopin

@atinux

Hugo Richard

@hugorcd

Мы выпускаем Nuxt UI v4 — важный шаг и новый стандарт для нашей библиотеки компонентов. Nuxt UI и Nuxt UI Pro объединены в одну мощную и полностью бесплатную open-source библиотеку.

Это открывает новую главу для экосистем Vue и Nuxt благодаря переходу NuxtLabs в Vercel. Каждый компонент — от простой кнопки до боковой панели дашборда — теперь доступен всем.

То, что раньше было платным, доступно всем: более 100 компонентов, продвинутые секции и готовые к продакшену шаблоны в одном месте.

Собирайте что угодно быстрее

Nuxt UI v4 упрощает создание современных приложений: лендинги, страницы цен, документация, блоги, портфолио и т.д. без старта с нуля.

Всё необходимое в одном пакете @nuxt/ui:

110+ компонентов — от простых сайтов до сложных приложений.
12 бесплатных шаблонов — лендинг, SaaS, дашборд, доки, портфолио, чат, changelog.
Контент и типографика — Markdown и контентные сайты с prose-компонентами и Nuxt Content.
Vue и Nuxt — работает в любом Vue- или Nuxt-проекте, а также с Adonis и Laravel.

Весь набор Pro теперь общий: мощные компоненты, раньше только для платных пользователей, бесплатны для всех.

  <template>
    <UApp>
      <UHeader>
        <UNavigationMenu :items="navigation" />
        <template #right>
          <UColorModeButton />
          <UButton icon="i-simple-icons-github" />
        </template>
      </UHeader>

      <UPageHero
        title="Nuxt UI - Starter"
        description="Nuxt UI is a free and open-source UI library for Nuxt applications. Create beautiful & responsive applications in minutes."
        :links="heroLinks"
      />

      <UPageSection
        title="The freedom to build anything"
        description="Nuxt UI ships with a comprehensive set of components that cover a wide range of use-cases. Carefully crafted to reduce boilerplate code without sacrificing flexibility."
        :features="features"
      />

      <UPageSection title="Pricing">
        <UPricingPlans :plans="plans" />
      </UPageSection>

      <UPageSection>
        <UPageCTA
          title="Start with Nuxt UI today!"
          description="Nuxt UI is a free and open-source UI library for Nuxt applications."
          variant="subtle"
          :links="ctaLinks"
        />
      </UPageSection>

      <UFooter :items="footerItems" />
    </UApp>
  </template>

От макета к коду без разрывов

Успешный проект начинается с продуманной дизайн-системы. В v4 мы бесплатно выпускаем полный Figma Kit, повторяющий всю библиотеку компонентов.

Более 2000 вариантов компонентов и дизайн-токены в одной точке входа во Figma, с пояснениями по структуре и использованию. Дизайнеры и разработчики работают из одного источника, коллаборация проще, дизайн и реализация совпадают.

Скачать Figma Kit →

Улучшенный опыт разработки

Помимо новых компонентов, v4 приносит заметные улучшения в рабочий процесс.

Простая миграция

В отличие от перехода с v2 на v3, миграция на v4 проста: фокус на объединении, а не на breaking changes. Большинство компонентов работают так же, существующий код в основном не трогаем.

Подробности — в руководстве по миграции.

Обновлённая документация

Документация переработана: понятнее структура, сложные темы вынесены в отдельные страницы. Документация готова и для ИИ: MCP-сервер (Model Context Protocol) даёт инструментам вроде Cursor прямой доступ к описанию компонентов и метаданным. Есть файлы LLMs.txt — структурированный формат для любых ИИ-ассистентов. Вся библиотека доступна ИИ прямо в редакторе.

Готовность к новой волне ИИ

Компоненты чата поддерживают Vercel AI SDK v5. Класс Chat и формат сообщений (с parts) совместимы с последними изменениями AI SDK.

Благодарность пользователям Pro

Отдельное спасибо всем, кто поддерживал Nuxt UI Pro. Ваши раннее использование и обратная связь помогли сформировать Nuxt UI и довести проект до момента, когда эти возможности доступны всему сообществу.

Ваша поддержка сделала это возможным.

Начните собирать уже сегодня

Создайте новый проект с любым из бесплатных шаблонов:

npm create nuxt@latest -- -t ui

npm create nuxt@latest -- -t github:nuxt-ui-templates/landing

npm create nuxt@latest -- -t github:nuxt-ui-templates/docs

npm create nuxt@latest -- -t github:nuxt-ui-templates/saas

npm create nuxt@latest -- -t github:nuxt-ui-templates/dashboard

npm create nuxt@latest -- -t github:nuxt-ui-templates/chat

npm create nuxt@latest -- -t github:nuxt-ui-templates/portfolio

npm create nuxt@latest -- -t github:nuxt-ui-templates/changelog

Или добавьте в существующий проект:

npm install @nuxt/ui@latest

Будущее — открытое

С единой кодовой базой и поддержкой Vercel мы как никогда готовы двигать границы разработки компонентов. Этот релиз не состоялся бы без сообщества и всех, кто помогал создавать Nuxt UI.

Ждём, что вы построите с Nuxt UI. Будущее UI-разработки — бесплатное, открытое и мощное.

Начать просто: загляните в документацию и Discord, чтобы общаться с разработчиками, которые собирают проекты на Nuxt UI.

← Вернуться в блог