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

nuxt.config

Точка входа конфигурации по-прежнему — файл 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-фреймворк. В файле nuxt.config не используйте require и module.exports.

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

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

Асинхронный синтаксис конфига устарел. Для асинхронных операций используйте хуки Nuxt.

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/. Либо переименуйте каталог, либо задайте dir.public в nuxt.config.

TypeScript

Миграция проще при использовании TypeScript в Nuxt. Писать весь код на TypeScript не обязательно — Nuxt даст подсказки типов в редакторе.

Подробнее: поддержка TypeScript в Nuxt.

Миграция

1. Создайте tsconfig.json:

   {
     "files": [],
     "references": [
       {
         "path": "./.nuxt/tsconfig.app.json"
       },
       {
         "path": "./.nuxt/tsconfig.server.json"
       },
       {
         "path": "./.nuxt/tsconfig.shared.json"
       },
       {
         "path": "./.nuxt/tsconfig.node.json"
       }
     ]
   }
   

2. Выполните npx nuxt prepare для генерации tsconfig.
3. Установите Volar по инструкции.

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

Рекомендации Vue и breaking changes между Vue 2 и 3. См. гайд по миграции на Vue 3 и список breaking changes.

Vue 3 migration build с Nuxt 3 использовать нельзя.

Vuex

В Nuxt больше нет встроенной интеграции Vuex. Рекомендуется pinia с модулем для Nuxt.

Минимальная настройка глобального состояния на pinia:

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

yarn add pinia @pinia/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` is the store instance
      this.counter++
    },
  },
})

Создайте плагин для доступа к store глобально:

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)
})

Для больших приложений миграция может быть объёмной. Альтернатива — community-модуль nuxt3-vuex-module, работающий из коробки.