2021-10-11 12:57:54 +00:00
# Introduction
2021-10-11 22:47:43 +00:00
Getting started with Nuxt 3 is straightforward.
::alert{type=warning icon=🚧}
2021-11-21 12:31:44 +00:00
Nuxt 3 is currently in beta, keep in mind that **it is not yet production-ready** .< br >
2021-10-11 22:47:43 +00:00
Thank you in advance for your understanding 💛
::
2021-10-11 16:37:38 +00:00
## What is Nuxt?
2021-10-11 12:57:54 +00:00
2021-10-11 21:49:54 +00:00
If this is the first time you're learning about Nuxt or you want to get more familiar with Nuxt 3, we recommend you begin by reading the [Concepts section ](/concepts ).
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
## Prerequisites
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
Before getting started, please make sure you have installed the recommended setup.
2021-10-11 12:57:54 +00:00
* **Node.js**< sup > *</ sup > (latest LTS version) 👉 [[Download ](https://nodejs.org/en/download/ )]
* **Visual Studio Code** 👉 [[Download ](https://code.visualstudio.com/ )]
* **Volar Extension** 👉 [[Download ](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar )]
2022-01-19 18:10:38 +00:00
* Either enable [**Take Over Mode** ](https://github.com/johnsoncodehk/volar/discussions/471 ) (recommended)
* ... or add **TypeScript Vue Plugin (Volar)** 👉 [[Download ](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin )]
2021-10-11 12:57:54 +00:00
2021-10-11 21:49:54 +00:00
< sup > *</ sup > If you already have Node.js installed, check with `node --version` that you are using `v14` or `v16` .
2021-10-11 12:57:54 +00:00
2022-01-19 18:10:38 +00:00
::alert{type=info}
If you have enabled **Take Over Mode** or installed the **TypeScript Vue Plugin (Volar)** you can disable generating the shim for `*.vue` files:
```js
export default defineNuxtConfig({
typescript: {
shim: false
}
})
```
::
2021-10-11 22:47:43 +00:00
## Nuxt 3 or Bridge?
2021-10-11 12:57:54 +00:00
2021-10-11 21:49:54 +00:00
Next, decide whether to start from scratch or upgrade an existing Nuxt 2 project.
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
### Starting a fresh Nuxt project
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
::list{type=info}
2021-10-29 11:26:01 +00:00
* Enjoy using Vue 3
* All the new composables are available
* New templating system and conventions are enabled
2021-10-11 16:37:38 +00:00
::
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
::alert{icon=👉}
Checkout the [Installation section ](/getting-started/installation ).
::
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
### Migrating a Nuxt 2 project
2021-10-11 12:57:54 +00:00
2021-10-11 21:49:54 +00:00
If you have an existing Nuxt 2 project, we **strongly recommend** you begin by using Nuxt Bridge. This way you can try most new features while keeping breaking changes to a minimum.
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
::list{type=info}
2021-10-29 11:26:01 +00:00
2021-11-21 12:31:44 +00:00
* It's risk-free! You can always remove the module from your config
2021-10-29 11:26:01 +00:00
* Makes your project (almost) ready for Nuxt 3
* Enjoy new DX improvements without major rewrites for Vue 3
* Use Nitro engine for platform-agnostic and optimized deployments
* Help us stabilize Nuxt 3 and discover flaws
* Nuxt Bridge is more stable than Nuxt 3 at the moment
2021-10-11 16:37:38 +00:00
::
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
::alert{icon=👉}
Checkout the [Bridge installation section ](/getting-started/bridge ).
::
2021-10-11 12:57:54 +00:00
2021-10-12 14:55:20 +00:00
### Comparison
2021-10-11 12:57:54 +00:00
2021-10-29 11:26:01 +00:00
In the table below, there is a quick comparison between 3 versions of Nuxt:
2021-10-11 12:57:54 +00:00
Feature / Version | Nuxt 2 | Nuxt Bridge | Nuxt 3
-------------------------|-----------------|------------------|---------
2021-11-08 10:21:26 +00:00
Vue | 2 | 2 | 3
2021-10-13 08:56:04 +00:00
Stability | 😊 Stable | 😌 Semi-stable | 😬 Unstable
2021-11-04 11:20:40 +00:00
Performance | 🏎 Fast | ✈️ Faster | 🚀 Fastest
2021-10-11 12:57:54 +00:00
Nitro Engine | ❌ | ✅ | ✅
ESM support | 🌙 Partial | 👍 Better | ✅
2022-01-17 19:02:41 +00:00
TypeScript | ☑️ Opt-in | 🚧 Partial | ✅
2021-11-08 10:41:30 +00:00
Composition API | ❌ | 🚧 Partial | ✅
2021-11-04 11:20:40 +00:00
Options API | ✅ | ✅ | ✅
2021-10-11 12:57:54 +00:00
Components Auto Import | ✅ | ✅ | ✅
`<script setup>` syntax | ❌ | 🚧 Partial | ✅
Auto Imports | ❌ | ✅ | ✅
Webpack | 4 | 4 | 5
Vite | ⚠️ Partial | 🚧 Partial | 🚧 Experimental
2021-10-11 21:49:54 +00:00
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi
Static sites | ✅ | ✅ | 🚧