0965b7585c
With this it should be more obvious for the user that instead of `nuxt-app` the actual project name is meant. This was the case and example also in the nuxt 2 docs: https://nuxtjs.org/docs/get-started/installation/ Co-authored-by: Alexander Lichter <github@lichter.io>
2.9 KiB
| navigation.icon |
|---|
| uil:play-circle |
Installation
Get started with Nuxt quickly with our online starters or start locally with your terminal.
Play Online
You can start playing with Nuxt 3 in your browser using our online sandboxes:
:button-link[Play on StackBlitz]{href="https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz" blank .mr-2} :button-link[Play on CodeSandbox]{href="https://codesandbox.io/s/github/nuxt/starter/tree/v3-codesandbox" blank}
Start with one of our starters and themes directly by opening nuxt.new.
:button-link[Discover nuxt.new]{href="https://nuxt.new" blank}
Prerequisites
Before getting started, please make sure you have installed the recommended setup.
- Node.js* (latest LTS version) 👉 [Download]
- Visual Studio Code 👉 [Download]
- Volar Extension 👉 [Download]
- Either enable Take Over Mode (recommended)
- ... or add TypeScript Vue Plugin (Volar) 👉 [Download]
* If you already have Node.js installed, check with node --version above 16.11.
::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 in your nuxt.config file:
export default defineNuxtConfig({
typescript: {
shim: false
}
})
::
New Project
Open a terminal (if you're using Visual Studio Code, you can open an integrated terminal) and use the following command to create a new starter project:
::code-group
npx nuxi init <project-name>
pnpm dlx nuxi init <project-name>
::
Open your project folder in Visual Studio Code:
code <project-name>
Install the dependencies:
::code-group
yarn install
npm install
pnpm install
::
::alert
Note: If using pnpm, make sure to have .npmrc with shamefully-hoist=true inside it before pnpm install.
::
Development Server
Now you'll be able to start your Nuxt app in development mode:
::code-group
yarn dev -o
npm run dev -- -o
pnpm run dev -o
::
::alert{type=success icon=✨ .font-bold} Well done! A browser window should automatically open for http://localhost:3000. ::
Next Steps
Now that you've created your Nuxt 3 project, you are ready to start building your application.
- Learn about the framework concepts