2022-10-06 09:15:30 +00:00
---
2023-10-18 10:59:43 +00:00
title: 'Installation'
description: 'Get started with Nuxt quickly with our online starters or start locally with your terminal.'
navigation.icon: i-ph-play-duotone
2022-10-06 09:15:30 +00:00
---
2022-08-13 07:27:04 +00:00
## Play Online
2021-10-12 18:26:16 +00:00
2024-04-19 14:26:18 +00:00
If you just want to play around with Nuxt in your browser without setting up a project, you can use one of our online sandboxes:
2021-10-12 18:26:16 +00:00
2023-10-18 10:59:43 +00:00
::card-group
:card{title="Open on StackBlitz" icon="i-simple-icons-stackblitz" to="https://nuxt.new/s/v3" target="_blank"}
:card{title="Open on CodeSandbox" icon="i-simple-icons-codesandbox" to="https://nuxt.new/c/v3" target="_blank"}
::
2021-10-12 18:26:16 +00:00
2024-04-19 14:26:18 +00:00
Or follow the steps below to set up a new Nuxt project on your computer.
2022-11-28 13:03:11 +00:00
2023-03-09 13:34:18 +00:00
## New Project
2022-04-06 05:56:08 +00:00
2023-04-04 13:23:13 +00:00
<!-- TODO: need to fix upstream in nuxt/nuxt.com -->
<!-- markdownlint - disable - next - line MD001 -->
2023-03-15 14:28:56 +00:00
#### Prerequisites
2023-04-04 13:23:13 +00:00
2023-10-20 16:01:36 +00:00
- **Node.js** - [`v18.0.0` ](https://nodejs.org/en ) or newer
2024-03-05 10:32:40 +00:00
- **Text editor** - We recommend [Visual Studio Code ](https://code.visualstudio.com/ ) with the [official Vue extension ](https://marketplace.visualstudio.com/items?itemName=Vue.volar ) (previously known as Volar)
2023-03-15 14:28:56 +00:00
- **Terminal** - In order to run Nuxt commands
2024-02-21 17:09:45 +00:00
::note
2023-10-18 10:59:43 +00:00
::details
:summary[Additional notes for an optimal setup:]
- **Node.js**: Make sure to use an even numbered version (18, 20, etc)
- **Nuxtr**: Install the community-developed [Nuxtr extension ](https://marketplace.visualstudio.com/items?itemName=Nuxtr.nuxtr-vscode )
::
2022-04-06 05:56:08 +00:00
::
2023-10-18 11:26:06 +00:00
Open a terminal (if you're using [Visual Studio Code ](https://code.visualstudio.com ), you can open an [integrated terminal ](https://code.visualstudio.com/docs/editor/integrated-terminal )) and use the following command to create a new starter project:
2021-10-11 12:57:54 +00:00
2022-03-09 10:40:20 +00:00
::code-group
2024-06-25 20:30:37 +00:00
```bash [npm]
2023-06-22 15:58:58 +00:00
npx nuxi@latest init < project-name >
2024-06-25 20:30:37 +00:00
```
```bash [yarn]
yarn dlx nuxi@latest init < project-name >
2021-10-11 12:57:54 +00:00
```
2022-03-09 10:40:20 +00:00
```bash [pnpm]
2023-06-22 15:58:58 +00:00
pnpm dlx nuxi@latest init < project-name >
2022-03-09 10:40:20 +00:00
```
2023-08-17 06:30:28 +00:00
```bash [bun]
bunx nuxi@latest init < project-name >
```
2022-03-09 10:40:20 +00:00
::
2024-04-19 14:26:18 +00:00
::tip
Alternatively, you can find other starters or themes by opening [nuxt.new ](https://nuxt.new ) and following the instructions there.
::
2022-11-30 17:11:17 +00:00
Open your project folder in Visual Studio Code:
2021-10-11 12:57:54 +00:00
2023-10-18 10:59:43 +00:00
```bash [Terminal]
2022-11-30 17:11:17 +00:00
code < project-name >
2021-10-11 12:57:54 +00:00
```
2023-11-16 15:15:18 +00:00
Or change directory into your new project from your terminal:
```bash
cd < project-name >
```
2022-08-13 07:27:04 +00:00
## Development Server
2021-10-11 12:57:54 +00:00
2022-05-20 09:07:17 +00:00
Now you'll be able to start your Nuxt app in development mode:
2021-10-11 12:57:54 +00:00
2021-10-11 16:37:38 +00:00
::code-group
2021-10-29 11:26:01 +00:00
2022-03-09 10:40:20 +00:00
```bash [yarn]
2023-12-08 12:42:36 +00:00
yarn dev --open
2021-10-11 12:57:54 +00:00
```
2021-10-29 11:26:01 +00:00
2022-03-09 10:40:20 +00:00
```bash [npm]
2021-10-11 16:37:38 +00:00
npm run dev -- -o
```
2021-10-29 11:26:01 +00:00
2022-03-09 10:40:20 +00:00
```bash [pnpm]
2022-12-20 15:48:10 +00:00
pnpm dev -o
2022-03-09 10:40:20 +00:00
```
2023-08-24 08:12:21 +00:00
```bash [bun]
2023-08-24 06:44:43 +00:00
bun run dev -o
```
2021-10-11 16:37:38 +00:00
::
2021-10-11 12:57:54 +00:00
2024-02-21 17:09:45 +00:00
::tip{icon="i-ph-check-circle-duotone"}
2022-05-20 09:07:17 +00:00
Well done! A browser window should automatically open for < http: / / localhost:3000 > .
2021-10-11 16:37:38 +00:00
::
2021-10-11 12:57:54 +00:00
2022-08-13 07:27:04 +00:00
## Next Steps
2021-10-11 12:57:54 +00:00
2024-06-30 10:11:16 +00:00
Now that you've created your Nuxt project, you are ready to start building your application.
2021-10-11 12:57:54 +00:00
2023-10-18 10:59:43 +00:00
:read-more{title="Nuxt Concepts" to="/docs/guide/concepts"}