Co-authored-by: Dan Pastori <dan@521dimensions.com> Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com> Co-authored-by: pooya parsa <pyapar@gmail.com>
3.1 KiB
title |
---|
Configuration |
Project Configuration
nuxt.config
The starting point for your Nuxt app remains your nuxt.config
file.
::alert{icon=📦}
Nuxt configuration will be loaded using unjs/jiti
and unjs/c12
.
::
Migration
You should migrate to the new defineNuxtConfig
function that provides a typed configuration schema.
::code-group
export default {
// ...
}
import { defineNuxtConfig } from 'nuxt3'
export default defineNuxtConfig({
// ...
})
ESM Syntax
Nuxt 3 is an ESM native framework. Although unjs/jiti
provides semi compatibility when loading nuxt.config
file, avoid any usage of require
and module.exports
in this file.
- Change
module.exports
toexport default
- Change
const lib = require('lib')
toimport lib from 'lib'
Async Configuration
In order to make Nuxt loading behavior more predictable, async config syntax is deprecated. Consider using Nuxt hooks for async operations.
Dotenv
Nuxt has built-in support for loading .env
files. Avoid directly importing it from nuxt.config
.
Modules
Nuxt and Nuxt Modules are now build-time-only.
Migration
- Move all your
buildModules
intomodules
. - Check for Nuxt 3 compatibility of modules.
::alert If you are a module author, you can check out more information about module compatibility and our module author guide. ::
TypeScript
It will be much easier to migrate your application if you use Nuxt's TypeScript integration. This does not mean you need to write your application in TypeScript, just that Nuxt will provide automatic type hints for your editor.
You can read more about Nuxt's TypeScript support in the docs.
::alert{icon=📦}
Nuxt can type-check your app using vue-tsc
with nuxi typecheck
command.
::
Migration
-
Create a
tsconfig.json
with the following content:{ "extends": "./.nuxt/tsconfig.json" }
-
Run
npx nuxi prepare
to generate.nuxt/tsconfig.json
. -
Install Volar following the instructions in the docs.
Vue changes
There are a number of changes to what is recommended Vue best practice, as well as a number of breaking changes between Vue 2 and 3.
It is recommended to read the Vue 3 migration guide and in particular the breaking changes list.
It is not currently possible to use the Vue 3 migration build with Nuxt 3 RC.
Vuex
Nuxt no longer provides a Vuex integration. Instead, the official Vue recommendation is to use pinia
, which has built-in Nuxt support via a Nuxt module. Find out more about pinia here.
If you want to keep using Vuex, you can manually migrate to Vuex 4 following these steps.