Release· 7 марта 2025 г.

Nuxt 3.16

Вышел Nuxt 3.16 — новые возможности и улучшения производительности.

Daniel Roe

@danielroe.dev

В этом релизе много изменений!

⚡️ Новый способ создать Nuxt

Знакомьтесь с create-nuxt — новым способом запуска проектов Nuxt (отдельная благодарность @devgar за передачу имени пакета).

Упрощённая замена nuxi init: примерно в шесть раз меньше по размеру, один файл со всеми зависимостями — чтобы вы могли начать как можно быстрее.

Создать новый проект можно так:

npm create nuxt

screenshot of create nuxt app

Special thanks to @cmang for the beautiful ASCII-art. ❤️

Want to learn more about where we're headed with the Nuxt CLI? Check out our roadmap here, including our plans for an interactive modules selector.

🚀 Unhead v2

We've upgraded to unhead v2, the engine behind Nuxt's <head> management. This major version removes deprecations and improves how context works:

For Nuxt 3 users, we're shipping a legacy compatibility build so nothing breaks
The context implementation is now more direct via Nuxt itself

// Nuxt now re-exports composables while properly resolving the context
export function useHead(input, options = {}) {
  const unhead = injectHead(options.nuxt)
  return head(input, { head: unhead, ...options })
}

If you're using Unhead directly in your app, keep in mind:

Import from Nuxt's auto-imports or #app/composables/head instead of @unhead/vue
Importing directly from @unhead/vue might lose async context

Don't worry though - we've maintained backward compatibility in Nuxt 3, so most users won't need to change anything!

If you've opted into compatibilityVersion: 4, check out our upgrade guide for additional changes.

🔧 Devtools v2 Upgrade

Nuxt Devtools has leveled up to v2 (#30889)!

You'll love the new features like custom editor selection, Discovery.js for inspecting resolved configs (perfect for debugging), the return of the schema generator, and slimmer dependencies.

One of our favorite improvements is the ability to track how modules modify your Nuxt configuration - giving you X-ray vision into what's happening under the hood.

👉 Discover all the details in the Nuxt DevTools release notes.

⚡️ Performance Improvements

We're continuing to make Nuxt faster, and there are a number of improvements in v3.16:

Using exsolve for module resolution (#31124) along with the rest of the unjs ecosystem (nitro, c12, pkg-types, and more) - which dramatically speeds up module resolution
Smarter module resolution paths (#31037) - prioritizes direct imports for better efficiency
Eliminated duplicated Nitro alias resolution (#31088) - leaner file handling
Streamlined loadNuxt by skipping unnecessary resolution steps (#31176) - faster startups
Adopt oxc-parser for parsing in Nuxt plugins (#30066)

All these speed boosts happen automatically - no configuration needed!

Shout out to CodSpeed with Vitest benchmarking to measure these improvements in CI - it has been really helpful.

To add some anecdotal evidence, my personal site at roe.dev loads 32% faster with v3.16, and nuxt.com is 28% faster. I hope you see similar results! ⚡️

We're very pleased to bring you native delayed/lazy hydration support (#26468)! This lets you control exactly when components hydrate, which can improve initial load performance and time-to-interactive. We're leveraging Vue's built-in hydration strategies - check them out in the Vue docs.

<template>
  <!-- Hydrate when component becomes visible in viewport -->
  <LazyExpensiveComponent hydrate-on-visible />

  <!-- Hydrate when browser is idle -->
  <LazyHeavyComponent hydrate-on-idle />

  <!-- Hydrate on interaction (mouseover in this case) -->
  <LazyDropdown hydrate-on-interaction="mouseover" />

  <!-- Hydrate when media query matches -->
  <LazyMobileMenu hydrate-on-media-query="(max-width: 768px)" />

  <!-- Hydrate after a specific delay in milliseconds -->
  <LazyFooter :hydrate-after="2000" />
</template>

You can also listen for when hydration happens with the @hydrated event:

<LazyComponent hydrate-on-visible @hydrated="onComponentHydrated" />

Learn more about lazy hydration in our components documentation.

🧩 Advanced Pages Configuration

You can now fine-tune which files Nuxt scans for pages (#31090), giving you more control over your project structure:

nuxt.config.ts

export default defineNuxtConfig({
  pages: {
    // Filter specific files or directories
    pattern: ['**/*.vue'],
  }
})

🔍 Отладка

Опция debug стала гибче: можно включать только нужные категории логов (#30578):

nuxt.config.ts

export default defineNuxtConfig({
  debug: {
    // Включить нужные категории отладки
    templates: true,
    modules: true,
    watchers: true,
    hooks: {
      client: true,
      server: true,
    },
    nitro: true,
    router: true,
    hydration: true,
  }
})

Или включите всё одной опцией: debug: true.

🎨 Поддержка декораторов

Добавлена экспериментальная поддержка декораторов (#27672). Обратная связь по экспериментальным возможностям приветствуется.

nuxt.config.ts

export default defineNuxtConfig({
  experimental: {
    decorators: true
  }
})

function something (_method: () => unknown) {
  return () => 'decorated'
}

class SomeClass {
  @something
  public someMethod () {
    return 'initial'
  }
}

const value = new SomeClass().someMethod()
// вернёт 'decorated'

📛 Именованные алиасы слоёв

Локальные слои из ~~/layers теперь автоматически получают алиасы. Слой ~~/layers/test доступен как #layers/test (#30948) — настраивать ничего не нужно.

Для других слоёв можно задать имя в конфигурации:

nuxt.config.ts

export default defineNuxtConfig({
  $meta: {
    name: 'example-layer',
  },
})

Так создаётся алиас #layers/example-layer для вашего слоя — импорты становятся понятнее.

🧪 Обработка ошибок

Улучшены сообщения об ошибках и отслеживание источников (#31144):

Более понятные предупреждения для неопределённых вызовов useAsyncData с указанием файла и места
Страницы ошибок корректно показываются при ошибках island-страниц (#31081)

В терминале используются улучшенная обработка ошибок Nitro (youch) с поддержкой stack trace.

Nitro автоматически подключает source maps без дополнительных опций Node, при рендере страниц ошибок выставляются подходящие заголовки безопасности.

📦 Разработка модулей

Для авторов модулей добавлена возможность дополнять типы Nitro через addTypeTemplate (#31079):

// Внутри вашего Nuxt-модуля
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        declare module 'nitropack' {
          interface NitroRouteConfig {
            myCustomOption?: boolean
          }
        }
      `
    }, { nitro: true })
  }
})

⚙️ Обновление до Nitro v2.11

Мы перешли на Nitro v2.11. Улучшений много — полный список в релизных заметках.

👉 Подробности в релизных заметках Nitro v2.11.0.

📦 Новые мажорные версии unjs

В релиз вошли мажорные обновления из экосистемы unjs с упором на производительность и меньший размер за счёт ESM-only:

unenv обновлён до v2 (полная переработка)
db0 обновлён до v0.3 (только ESM, нативный node:sql, улучшения)
ohash обновлён до v2 (только ESM, нативный node:crypto, быстрее)
untyped обновлён до v2 (только ESM, меньше размер установки)
unimport обновлён до v4 (улучшения)
c12 обновлён до v3 (только ESM)
pathe обновлён до v2 (только ESM)
cookie-es обновлён до v2 (только ESM)
esbuild обновлён до v0.25
chokidar обновлён до v4

✅ Обновление

По-прежнему рекомендуем выполнить:

npx nuxi@latest upgrade --dedupe

Команда обновит lockfile и подтянет актуальные зависимости Nuxt, в том числе из экосистемы unjs.

Полный список изменений

Читать полный список изменений Nuxt v3.16.0.

Большое спасибо всем, кто участвовал в этом релизе. ❤️

В этом релизе много серьёзных изменений — если есть замечания или проблемы, напишите нам. 🙏

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