Конфигурация

nuxt.config

Отправной точкой для вашего приложения Nuxt остаётся файл nuxt.config.

Миграция

1. Перейдите на функцию defineNuxtConfig — она задаёт типизированную схему конфигурации.
   Nuxt 2Nuxt 3

   export default {
     // ...
   }
   

2. Если вы использовали router.extendRoutes, вы можете мигрировать на новый хук pages:extend:
   Nuxt 2Nuxt 3

   export default {
     router: {
       extendRoutes (routes) {
         //
       },
     },
   }
   

3. Если вы использовали router.routeNameSplitter, вы можете получить тот же результат, обновив логику генерации имени маршрута в новом хуке pages:extend:
   Nuxt 2Nuxt 3

   export default {
     router: {
       routeNameSplitter: '/',
     },
   }
   

Синтаксис ESM

Nuxt 3 является нативным ESM-фреймворком. Хотя unjs/jiti обеспечивает частичную совместимость при загрузке файла nuxt.config, избегайте любого использования require и module.exports в этом файле.

1. Измените module.exports на export default
2. Измените const lib = require('lib') на import lib from 'lib'

Асинхронная конфигурация

Для обеспечения более предсказуемого поведения загрузки Nuxt синтаксис асинхронной конфигурации устарел. Рассмотрите возможность использования хуков Nuxt для асинхронных операций.

Файлы .env (Dotenv)

У Nuxt есть встроенная поддержка загрузки файлов .env. Избегайте прямого импорта из nuxt.config.

Модули

Nuxt и модули Nuxt теперь доступны только во время сборки.

Миграция

1. Переместите все свои buildModules в modules.
2. Проверьте совместимость модулей с Nuxt 3.
3. Если у вас есть какие-либо локальные модули, указывающие на директорию, вам следует обновить это, чтобы указать на файл входа:

  export default defineNuxtConfig({
    modules: [
-     '~/modules/my-module'
+     '~/modules/my-module/index'
    ]
  })

Изменения в директориях

Директория static/ (для хранения статических ассетов) была переименована в public/. Вы можете либо переименовать свою директорию static в public, либо сохранить это имя, установив dir.public в вашем nuxt.config.

TypeScript

Перенести ваше приложение будет гораздо проще, если вы воспользуетесь интеграцией Nuxt с TypeScript. Это не значит, что вам нужно писать приложение на TypeScript, просто Nuxt обеспечит автоматические подсказки типов для вашего редактора.

Подробнее о поддержке TypeScript в Nuxt вы можете прочитать в документации.

Миграция

1. Создайте файл tsconfig.json со следующим содержимым:

   {
     "extends": "./.nuxt/tsconfig.json"
   }
   

2. Запустите npx nuxt prepare для генерации .nuxt/tsconfig.json.
3. Установите Volar, следуя инструкциям в документации.

Изменения во Vue

Существует ряд изменений, касающихся рекомендуемых лучших практик Vue, а также ряд критических изменений между Vue 2 и 3.

Рекомендуется прочитать Руководство по миграции Vue 3 и, в частности, список изменений.

В настоящее время невозможно использовать сборку для миграции Vue 3 с Nuxt 3.

Vuex

Nuxt больше не предоставляет интеграцию с Vuex. Вместо этого официальная рекомендация Vue — использовать pinia, которая имеет встроенную поддержку Nuxt через модуль Nuxt. Подробнее о Pinia здесь.

Простой способ обеспечить глобальное управление состоянием с помощью Pinia заключается в следующем:

Установите модуль @pinia/nuxt:

yarn add pinia @pinia/nuxt

Включите модуль в конфигурации Nuxt:

import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
})

Создайте директорию store в корне вашего приложения:

import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment () {
      // `this` — экземпляр стора
      this.counter++
    },
  },
})

Создайте файл плагина, чтобы подключить хранилище глобально:

import { useMainStore } from '~/store'

export default defineNuxtPlugin(({ $pinia }) => {
  return {
    provide: {
      store: useMainStore($pinia),
    },
  }
})

Если вы хотите продолжить использовать Vuex, вы можете вручную мигрировать на Vuex 4, следуя этим шагам.

Когда это будет сделано, вам потребуется добавить следующий плагин в ваше приложение Nuxt:

import store from '~/store'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(store)
})

Для крупных приложений эта миграция может потребовать много работы. Если обновление Vuex все еще создает препятствия, вам может потребоваться использовать общедоступный модуль: nuxt3-vuex-module, который должен работать из коробки.