Installation
Prerequisites
Here, you will find information on setting up and running a Nuxt.js project in 4 steps.
Another way to get started with Nuxt.js is to use CodeSandbox which is a great way for quickly playing around with Nuxt.js and/or sharing your code with other people.
Node
node - at least v8.9.0
We recommend you have the latest version installed.
Text editor
Use whatever you like, but we recommend VSCode.
Terminal
Use whatever you like, but we recommend using VSCode's integrated terminal.
Starting from scratch
Creating a Nuxt.js project from scratch only requires one file and one directory.
In this particular example, we will use the terminal to create the directories and files, but feel free to create them using your editor of choice.
Set up your project
To get started, create an empty directory with the name of your project and navigate into it:
mkdir <project-name>
cd <project-name>
Replace <project-name> with the name of your project.
Then create a file named package.json:
touch package.json
Open the package.json file in your favorite code editor and fill it with this JSON content:
{
"name": "my-app",
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"generate": "nuxt generate",
"start": "nuxt start"
}
}
scripts define Nuxt.js commands that will be launched with the command npm run <command>.
What is a package.json file?
The package.json is like the ID card of your project. If you don't know what the package.json file is, we highly recommend you to have a quick read on the NPM documentation.
Install nuxt
Once the package.json has been created, add nuxt to your project via npm or yarn like so below:
yarn add nuxt
npm install nuxt
This command will add nuxt as a dependency to your project and it will add it to your package.json automatically. The node_modules directory will also be created which is where all your installed packages and their dependencies are stored.
A yarn.lock or package-lock.json is also created which ensures a consistent install and compatible dependencies of your packages installed in your project.
Create your first page
Nuxt.js transforms every *.vue file inside the pages directory as a route for the application.
Create the pages directory in your project:
mkdir pages
Then, create an index.vue file in the pages directory:
touch pages/index.vue
It is important that this page is called index.vue as this will be the default page Nuxt shows when the application opens. It is the home page and it must be called index.
Open the index.vue file in your editor and add the following content:
<template>
<h1>Hello world!</h1>
</template>
Start the project
Run your project by typing one of the following commands below in your terminal:
yarn dev
npm run dev
We use the dev command when running our application in development mode.
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.
When launching Nuxt.js in development mode, it will listen for file changes in most directories, so there is no need to restart the application when e.g. adding new pages
When you run the dev command it will create .nuxt folder. This folder should be ignored from version control. You can ignore files by creating a .gitignore file at the root level and adding .nuxt.
Bonus step
Create a page named fun.vue in the pages directory.
Add a <template></template> and include a heading with a funny sentence inside.
Then, go to your browser and see your new page on http://localhost:3000/fun.
Create a directory named more-fun and put an index.vue file inside. This will give the same result as creating a more-fun.vue file
Using create-nuxt-app
To get started quickly you can use the create-nuxt-app.
Make sure you have npx installed (npx is shipped by default since NPM 5.2.0) or npm v6.1 or yarn.
yarn create nuxt-app <project-name>
npx create-nuxt-app <project-name>
npm init nuxt-app <project-name>
It will ask you some questions (name, Nuxt options, UI framework, TypeScript, linter, testing framework, etc.), when answered, it will install all the dependencies. The next step is to navigate to the project folder and launch it:
cd <project-name>
yarn dev
cd <project-name>
npm run dev
The application is now running on http://localhost:3000. Well done!