3.4 KiB
title | description | navigation.icon |
---|---|---|
Installation | Get started with Nuxt quickly with our online starters or start locally with your terminal. | i-ph-play-duotone |
Play Online
You can start playing with Nuxt 3 in your browser using 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"} ::
Start with one of our starters and themes directly by opening nuxt.new.
New Project
Prerequisites
- Node.js -
v18.0.0
or newer - Text editor - We recommend Visual Studio Code with the Volar Extension
- 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
- Volar: Either enable Take Over Mode (recommended) or add the TypeScript Vue Plugin
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.ts
file:
export default defineNuxtConfig({
typescript: {
shim: false
}
})
:: ::
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@latest init <project-name>
pnpm dlx nuxi@latest init <project-name>
bunx nuxi@latest init <project-name>
::
Open your project folder in Visual Studio Code:
code <project-name>
Or change directory into your new project from your terminal:
cd <project-name>
Install the dependencies:
::code-group
yarn install
npm install
pnpm install
bun install
::
::note
If you are using Yarn 2+ (Berry), add nodeLinker: node-modules
to your .yarnrc.yml
file.
You can follow this issue status here
::
Development Server
Now you'll be able to start your Nuxt app in development mode:
::code-group
yarn dev --open
npm run dev -- -o
pnpm dev -o
bun run dev -o
::
::tip{icon="i-ph-check-circle-duotone"} 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.
:read-more{title="Nuxt Concepts" to="/docs/guide/concepts"}