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

Экспериментальные возможности 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. Поведение по умолчанию — выполнить перезагрузку нового маршрута при переходе на новый маршрут, когда чанк не загружается.

Если вы установите для этого параметра значение 'automatic-immediate', Nuxt немедленно перезагрузит текущий маршрут, вместо того чтобы ждать перехода. Это полезно при ошибках чанков, которые не вызваны навигацией, например, когда приложению Nuxt не удается загрузить ленивый компонент. Потенциальным недостатком такого поведения является нежелательная перезагрузка, например, когда приложению не нужен фрагмент, вызвавший ошибку.

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

nuxt.config.ts

export default defineNuxtConfig
({
  experimental
: {
    emitRouteChunkError
: 'automatic' // 'automatic-immediate', '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.

Также возможно сканировать метаданные страницы только после того, как все маршруты зарегистрированы в pages:extend. Затем будет вызван другой хук, pages:resolved. Чтобы включить это поведение, установите 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

Кэширует артефакты сборки Nuxt на основе хэша конфигурационных и исходных файлов.

nuxt.config.ts

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

Если эта функция включена, изменения в следующих файлах вызовут полную пересборку:

Структура директории

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

Кроме того, любые изменения файлов в srcDir вызовут пересборку клиент/сервер бандла Vue. Nitro всегда будет пересобираться (хотя сейчас ведется работа над тем, чтобы Nitro мог объявлять свои кэшируемые артефакты и их хэши).

A Сохраняется не более 10 tarball'ов кэша.

normalizeComponentNames

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

nuxt.config.ts

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

По умолчанию, если вы не задали это вручную, Vue присвоит компоненту имя, соответствующее имени файла компонента.

Структура директории

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

Что касается Vue, в этом случае имя компонента будет MyComponent. Если бы вы хотели использовать с ним <KeepAlive> или идентифицировать его во Vue DevTools, вам нужно было бы использовать это имя.

Но чтобы автоимпортировать его, вам нужно использовать SomeFolderMyComponent.

Если установить experimental.normalizeComponentNames, эти два значения совпадут, и Vue сгенерирует имя компонента, соответствующее паттерну Nuxt для именования компонентов.

tsconfig.json

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

Возможности

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