Here, you will find information on setting up and running a Nuxt project in 4 steps.
You can play with Nuxt online directly on CodeSandbox or StackBlitz:Play on CodeSandbox Play on StackBlitz
- node - We recommend you have either 16.x or 14.x installed.
- A text editor, we recommend VS Code with the Volar extension or WebStorm .
- A terminal, we recommend using VS Code's integrated terminal or WebStorm terminal .
To get started quickly, you can use create-nuxt-app .
Make sure you have installed yarn, npx (included by default with npm v5.2+) or npm (v6.1+).
yarn create nuxt-app <project-name>
npx create-nuxt-app <project-name>
npm init nuxt-app <project-name>
pnpm create nuxt-app <project-name>
It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc). To find out more about all the options see the create-nuxt-app documentation .
Once all questions are answered, it will install all the dependencies. The next step is to navigate to the project folder and launch it:
npm run dev
The application is now running on http://localhost:3000 . Well done!
Creating a Nuxt project from scratch only requires one file and one directory.
We will use the terminal to create the directories and files, feel free to create them using your editor of choice.
Create an empty directory with the name of your project and navigate into it:
<project-name> with the name of your project.
Fill the content of your
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
scripts define Nuxt commands that will be launched with the command
npm run <command> or
package.json is like the ID card of your project. It contains all the project dependencies and much more. If you don't know what the
package.json file is, we highly recommend you to have a quick read on the npm documentation .
package.json has been created, add
nuxt to your project via
yarn like so below:
yarn add nuxt
npm install nuxt
pnpm add nuxt --shamefully-hoist
This command will add
nuxt as a dependency to your project and add it to your
node_modules directory will also be created which is where all your installed packages and dependencies are stored.
package-lock.json is also created which ensures a consistent install and compatible dependencies of your packages installed in your project.
Nuxt transforms every
*.vue file inside the
pages directory as a route for the application.
pages directory in your project:
Then, create an
index.vue file in the
It is important that this page is called
index.vue as this will be the default home page Nuxt shows when the application opens.
index.vue file in your editor and add the following content:
Run your project by typing one of the following commands below in your terminal:
npm run dev
The application is now running on http://localhost:3000 .
Open it in your browser by clicking the link in your terminal and you should see the text "Hello World" we copied in the previous step.
Create a page named
fun.vue in the
<template></template> and include a heading with a funny sentence inside.
Then, go to your browser and see your new page on localhost:3000/fun .
more-fun and putting an
index.vue file inside it will give the same result as creating a