Экосистема Vue и Nuxt: комбайн Vite+ 1.0, Nuxt DevTools v4 и ускорение Nuxt Icon

Современная фронтенд-разработка на стеке Vue 3 и Nuxt годами страдала от так называемого налога на фрагментацию. Чтобы запустить обычный проект с надежным контролем качества, инженеру приходилось синхронизировать зоопарк несовместимых конфигурационных файлов: .eslintrc.js, .prettierrc, tsconfig.json, vite.config.ts, vitest.config.ts, да еще и настраивать утилиты вроде husky и lint-staged для прекоммит-хуков. Конец октября 2026 года ознаменовался выходом трех взаимодополняющих обновлений, нацеленных на радикальное упрощение этого пайплайна.

Vite+ 1.0

Компания VoidZero под руководством создателя Vue Эвана Ю представила первый стабильный релиз Vite+ версии 1.0. Это универсальный инженерный комбайн, который берет на себя задачи бандлера, линтера, форматтера и раннера тестов под единым интерфейсом командной строки vp.

Под капотом Vite+ опирается на высокопроизводительный тулчейн Oxc, написанный на языке Rust. Линтер Oxlint проверяет правила кода в десятки раз быстрее классического ESLint на JavaScript, а форматтер Oxfmt форматирует файлы без задержек. Единая команда vp check параллельно линтит проект, проверяет стили и типизацию TypeScript, а секция staged прямо в конфиге избавляет от необходимости ставить внешние скрипты перехвата коммитов:

// Конфигурация vite.config.ts с поддержкой Vite+ 1.0
import { defineConfig } from 'vite-plus';
import vue from '@vitejs/plugin-vue';

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

  // Быстрое форматирование кода на базе Oxfmt
  fmt: {
    semi: true,
    singleQuote: true,
    printWidth: 100,
  },

  // Сверхбыстрый статический анализ на базе Oxlint
  lint: {
    options: {
      typeAware: true,
      typeCheck: true,
    },
    categories: {
      correctness: 'error',
      suspicious: 'warn',
    },
    rules: {
      'no-unused-vars': 'error',
      'vue/no-mutating-props': 'error',
    },
  },

  // Встроенный прекоммит-хук без сторонних утилит husky
  staged: {
    '*': 'vp check --fix',
  },
});

Nuxt DevTools v4

Официальная панель инструментов разработчика обновилась до мажорной версии Nuxt DevTools v4. Архитектура оверлея переписана в виде модульного контейнера Devframe, который встраивает возможности отладки прямо в экран браузера.

В новой версии объединены инструменты Vue DevTools с глубокой инспекцией реактивного состояния (ref, reactive, computed), визуализатор графа импортов бандла и детальный трекер гидратации серверного рендеринга (SSR). Разработчик может прямо из плавающей панели отслеживать задержки серверных маршрутов Nitro (/server/api) и инспектировать кэш состояний Pinia без переключения во вкладки инструментов браузера.

Nuxt Icon v2.6.2

Точечный, но критически важный релиз получил официальный модуль работы с векторной графикой — Nuxt Icon v2.6.2. В нем решена давняя проблема десинхронизации серверного и клиентского рендеринга (SSR hydration mismatch).

Раньше клиентский рантайм Iconify загружался целиком на первом же экране, блокируя парсинг страницы. В версии 2.6.2 рантайм подключается лениво через Intersection Observer строго в момент попадания иконки во вьюпорт. Кроме того, классы иконок теперь хэшируются с помощью 64-битного алгоритма fnv1a-64, что полностью устранило коллизии селекторов стилей:

// Оптимизация доставки векторных иконок в nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/icon',
    '@nuxt/devtools',
  ],

  icon: {
    // Включение бандлинга коллекций для исключения внешних сетевых запросов
    serverBundle: {
      collections: ['lucide', 'simple-icons'],
    },
    // Режим чистых CSS-масок вместо тяжелых инлайн-SVG
    mode: 'css',
    size: '20px',
  },

  devtools: {
    enabled: true,
  },
});