Экспериментальные возможности

Экспериментальные возможности Nuxt могут быть включены в конфигурационном файле Nuxt.

Внутри Nuxt использует @nuxt/schema для определения этих экспериментальных возможностей. За дополнительной информацией вы можете обратиться к документации API или исходному коду.

Обратите внимание, что эти функции являются экспериментальными и могут быть удалены или изменены в будущем!

asyncContext

В Nuxt и Nitro включена возможность доступа к нативному async-контексту для вложенных композаблов. Это открывает возможность использовать композаблы внутри async-композаблов и снижает вероятность получения ошибки Nuxt instance is unavailable.

nuxt.config.ts

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

Полное объяснение смотрите в pull-request на GitHub.

asyncEntry

Позволяет генерировать асинхронную точку входа для пакета Vue, что способствует поддержке федерации модулей.

nuxt.config.ts

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

externalVue

При сборке "выбрасывает наружу" vue, @vue/* и vue-router.

Включена по умолчанию.

nuxt.config.ts

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

Скорее всего, эта функция будет удалена в ближайшем будущем.

emitRouteChunkError

Вызывает хук app:chunkError при ошибке загрузки чанков vite/webpack. Поведение по умолчанию - выполнить полную перезагрузку нового маршрута, когда чанк не загружается.

Вы можете отключить автоматическую обработку, установив значение false, или обрабатывать ошибки чанков вручную, установив значение manual.

nuxt.config.ts

export default defineNuxtConfig
({
  experimental
: {
    emitRouteChunkError
: 'automatic' // 'manual' или false
  }
})

restoreState

Позволяет восстанавливать состояние приложения Nuxt из sessionStorage при перезагрузке страницы после ошибки чанка или ручного вызова reloadNuxtApp().

Чтобы избежать ошибок при гидратации, он будет применяться только после того, как приложение Vue было смонтировано, что означает, что при первоначальной загрузке может наблюдаться мерцание.

Подумайте, прежде чем включать эту функцию, так как она может вызвать неожиданное поведение, и рассмотрите возможность предоставления явных ключей для useState, так как автоматически сгенерированные ключи могут не совпадать в разных сборках.

nuxt.config.ts

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

inlineRouteRules

Определите правила маршрута на уровне страницы с помощью defineRouteRules.

nuxt.config.ts

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

На основе path страницы будут созданы соответствующие правила маршрутизации.

Подробнее об этом читайте в утилите defineRouteRules.

Узнать больше Docs > Guide > Concepts > Rendering#hybrid Rendering.

renderJsonPayloads

Позволяет рендерить полезную нагрузку JSON с поддержкой обновления сложных типов.

Включена по умолчанию.

nuxt.config.ts

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

noVueServer

Отключает эндпоинт рендеринга сервера Vue в Nitro.

nuxt.config.ts

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

payloadExtraction

Позволяет извлекать полезную нагрузку страниц, сгенерированных с помощью nuxt generate.

nuxt.config.ts

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

clientFallback

Включает экспериментальный компонент <NuxtClientFallback> для рендеринга контента на клиенте при наличии ошибки в SSR.

nuxt.config.ts

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

crossOriginPrefetch

Включает cross-origin предварительную загрузку с помощью API Speculation Rules.

nuxt.config.ts

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

Подробнее о Speculation Rules API.

viewTransition

Включает интеграцию View Transition API с маршрутизатором на стороне клиента.

nuxt.config.ts

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

Прочитайте и отредактируйте живой пример в https://stackblitz.com/edit/nuxt-view-transitions?file=app.vue.

Подробнее о View Transition API.

writeEarlyHints

Включает запись ранних подсказок при использовании node-сервера.

nuxt.config.ts

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

componentIslands

Включает экспериментальную поддержку островных компонентов с помощью файлов <NuxtIsland> и .island.vue.

nuxt.config.ts

export default defineNuxtConfig
({
  experimental
: {
    componentIslands
: true // false или 'local+remote'
  }
})

Узнать больше Docs > Guide > Directory Structure > Components#server Components.

Вы можете следить за дорожной картой серверных компонентов на GitHub.

localLayerAliases

Разрешение псевдонимов ~, ~~, @ и @@, расположенных внутри слоев, относительно их исходного и корневого каталогов.

Включена по умолчанию.

nuxt.config.ts

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

typedPages

Включите новый экспериментальный типизированный маршрутизатор с помощью unplugin-vue-router.

nuxt.config.ts

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

Из коробки это позволит использовать navigateTo, <NuxtLink>, router.push() и многое другое.

Вы даже можете получить типизированные параметры внутри страницы, используя const route = useRoute('route-name').

Посмотрите видео от Дэниела Ро, в котором объясняется безопасная для типов маршрутизация в Nuxt.

watcher

Установите альтернативный watcher, который будет использоваться в качестве watching-сервиса для Nuxt.

По умолчанию Nuxt использует chokidar-granular, который будет игнорировать каталоги верхнего уровня (например, node_modules и .git), которые исключены из просмотра.

Вместо этого параметра можно установить значение parcel, чтобы использовать @parcel/watcher, что может улучшить производительность в больших проектах или на платформах Windows.

Вы также можете установить значение chokidar, чтобы следить за всеми файлами в вашем каталоге исходных текстов.

nuxt.config.ts

export default defineNuxtConfig
({
  experimental
: {
    watcher
: 'chokidar-granular' // 'chokidar' или 'parcel' также можно использовать
  }
})

sharedPrerenderData

Включение этой функции автоматически разделяет данные полезной нагрузки между страницами, на которых выполняется пререндеринг. Это может привести к значительному повышению производительности при предрендеринге сайтов, использующих useAsyncData или useFetch и получающих одни и те же данные на разных страницах.

nuxt.config.ts

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

Посмотрите видео от Александра Лихтера об экспериментальной настройке sharedPrerenderData.

При использовании этой функции особенно важно убедиться, что любой уникальный ключ ваших данных всегда можно разрешить в те же данные. Например, если вы используете useAsyncData для получения данных, относящихся к определенной странице, вы должны предоставить ключ, который однозначно соответствует этим данным. (useFetch сделает это автоматически).

// Это было бы небезопасно на динамической странице (например, `[slug].vue`), потому что slug маршрута имеет значение
// в получаемых данных, но Nuxt не может этого знать, потому что это не отражено в ключе.
const route = useRoute()
const { data } = await useAsyncData(async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})
// Вместо этого следует использовать ключ, который однозначно идентифицирует получаемые данные.
const { data } = await useAsyncData(route.params.slug, async () => {
  return await $fetch(`/api/my-page/${route.params.slug}`)
})

clientNodeCompat

С помощью этой функции Nuxt будет автоматически полифиллить импорты Node.js в клиентской сборке, используя unenv.

Чтобы заставить глобалы типа Buffer работать в браузере, их нужно внедрить вручную.

import { Buffer } from 'node:buffer'

globalThis.Buffer = globalThis.Buffer || Buffer

scanPageMeta

Эта опция позволяет раскрывать некоторые метаданные маршрута, определенные в definePageMeta, во время сборки для модулей (в частности, alias, name, path, redirect).

Это работает только со статическими данными или строками/массивами, а не с переменными или условными присваиваниями. Дополнительную информацию и контекст см. в оригинальном issue.

It is also possible to scan page metadata only after all routes have been registered in pages:extend. Then another hook, pages:resolved will be called. To enable this behavior, set scanPageMeta: 'after-resolve'.

Вы можете отключить эту возможность, если она вызывает проблемы в вашем проекте.

nuxt.config.ts

export default defineNuxtConfig
({
  experimental
: {
    scanPageMeta
: false
  }
})

cookieStore

Включает поддержку CookieStore для прослушивания обновлений cookie (если это поддерживается браузером) и обновления значений useCookie.

nuxt.config.ts

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

Подробнее о CookieStore.

buildCache

Caches Nuxt build artifacts based on a hash of the configuration and source files.

nuxt.config.ts

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

When enabled, changes to the following files will trigger a full rebuild:

Directory structure

.nuxtrc
.npmrc
package.json
package-lock.json
yarn.lock
pnpm-lock.yaml
tsconfig.json
bun.lockb

In addition, any changes to files within srcDir will trigger a rebuild of the Vue client/server bundle. Nitro will always be rebuilt (though work is in progress to allow Nitro to announce its cacheable artifacts and their hashes).

A maximum of 10 cache tarballs are kept.

normalizeComponentNames

Ensure that auto-generated Vue component names match the full component name you would use to auto-import the component.

nuxt.config.ts

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

By default, if you haven't set it manually, Vue will assign a component name that matches the filename of the component.

Directory structure

├─ components/
├─── SomeFolder/
├───── MyComponent.vue

In this case, the component name would be MyComponent, as far as Vue is concerned. If you wanted to use <KeepAlive> with it, or identify it in the Vue DevTools, you would need to use this component.

But in order to auto-import it, you would need to use SomeFolderMyComponent.

By setting experimental.normalizeComponentNames, these two values match, and Vue will generate a component name that matches the Nuxt pattern for component naming.

tsconfig.json

Nuxt генерирует файл .nuxt/tsconfig.json с настройками по умолчанию и вашими псевдонимами.

Возможности

Включайте или отключайте дополнительные функции Nuxt, чтобы открыть новые возможности.