3.0 KiB
| title | description | navigation.icon |
|---|---|---|
| Installation | Get started with Nuxt quickly with our online starters or start locally with your terminal. | i-ph-play |
Play Online
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:
::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"} ::
Or follow the steps below to set up a new Nuxt project on your computer.
New Project
Prerequisites
- Node.js -
18.xor newer (but we recommend the active LTS release) - Text editor - There is no IDE requirement, but we recommend Visual Studio Code with the official Vue extension (previously known as Volar) or WebStorm, which, along with other JetBrains IDEs, offers great Nuxt support right out-of-the-box.
- Terminal - In order to run Nuxt commands
::note ::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 :: ::
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:
::package-managers
npx nuxi@latest init <project-name>
yarn dlx nuxi@latest init <project-name>
pnpm dlx nuxi@latest init <project-name>
bun x nuxi@latest init <project-name>
::
::tip Alternatively, you can find other starters or themes by opening nuxt.new and following the instructions there. ::
Open your project folder in Visual Studio Code:
code <project-name>
Or change directory into your new project from your terminal:
cd <project-name>
Development Server
Now you'll be able to start your Nuxt app in development mode:
::package-managers
npm run dev -- -o
yarn dev --open
pnpm dev -o
bun run dev -o
::
::tip{icon="i-ph-check-circle"} 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/guide/concepts"}