Back to Nuxt

Installation

docs/1.getting-started/02.installation.md

4.4.63.4 KB
Original Source

Play Online

If you just want to play around with Nuxt in your browser without setting up a project, you can use this online sandbox:

::card-group ::card{title="Open on StackBlitz" color="info" icon="i-simple-icons-stackblitz" to="https://stackblitz.com/github/nuxt/starter?file=app%2Fapp.vue" target="_blank"} Online playground with code editor and terminal access. :: ::

New Project

::steps

Prerequisites

::callout ::collapsible{name="additional notes for an optimal setup"}

  • Node.js: Make sure to use an even numbered version (22, 24, etc.)
  • Neovim: When configuring the Vue TypeScript plugin, make sure location points to the @vue/language-server package directory, not its binary. See the Neovim setup guide for a working configuration.
  • WSL: If you are using Windows and experience slow HMR, you may want to try using WSL (Windows Subsystem for Linux) which may solve some performance issues.
  • Windows slow DNS resolution: Instead of using localhost:3000 for local dev server on Windows, use 127.0.0.1 for much faster loading experience on browsers. :: ::

Create a 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{sync="pm"}

bash
npm create nuxt@latest <project-name>
bash
yarn create nuxt <project-name>
bash
pnpm create nuxt@latest <project-name>
bash
bun create nuxt@latest <project-name>
bash
deno -A npm:create-nuxt@latest <project-name>

::

Open your project folder in Visual Studio Code:

bash
code <project-name>

Or change directory into your new project from your terminal:

bash
cd <project-name>

Development Server

Now you'll be able to start your Nuxt app in development mode:

::code-group{sync="pm"}

bash
npm run dev -- -o
bash
yarn dev --open
bash
pnpm dev -o
bash
bun run dev -o

# To use the Bun runtime during development
# bun --bun run dev -o
bash
deno run dev -o

::

::tip{icon="i-lucide-circle-check"} Well done! A browser window should automatically open for http://localhost:3000. ::

::

Next Steps

Now that you've created your Nuxt project, you are ready to start building your application.

:read-more{title="Nuxt Concepts" to="/docs/4.x/guide/concepts"}