Next.jstranslation

1. Install

Need to prepare

  • Node we recommend the latest LTS version or the latest V10.13 and above (including V11)
  • Text editor, we recommend VS Code and plugins [Vetur] or [webstorm]
  • Terminal, we recommend using vscode’s built-in terminal or webstorm terminal.

Using the create – nuxt – app

For a quick installation you can use creat-next-app.

Make sure you have NPX installed (NPX is available by default starting with 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>
Copy the code

It will interrogate you some options (name, nuxt options, UI framework, typescript, linter, testing framework, etc.). See create NuxT App for more information about the options available.

When the selection is complete, it installs all dependencies. The next step is to go to the project folder and start it.

cd <project-name>
yarn dev

cd <project-name>
npm run dev
Copy the code

The app is currently running at http://localhost:3000. Done!

The alternative is to launch nuxt.js using CodesandBox, which is a quick way to run ust. Js and a good way to share code with others.

Installation manual

All you need to create a Next. Js project from scratch is a file and a directory.

We will create directories and files using the terminal and create them freely using the compiler of your choice.

set up your project

Create an empty directory to name your project and follow the path to it.

mkdir <name>
cd <name>
Copy the code

Replace

with project name

Create package.json file:

touch package.json
Copy the code

Fill in the contents of your package.json:

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "nuxt start"
  }
}
Copy the code

Scripts defines the nuxt.js command and can start the project with the command NPM run or yarn .

What is a package.json file?

Package. json is like your project’s ID card. It contains all of your project’s dependencies. If you don’t know what package.json is, we strongly recommend you read NPM Documentation.

Install nuxt

After package.json is created, add NUxT to your project using NPM or YARN.

yarn add nuxt
Copy the code

This will add nuxT as a dependency to your project and will add it to package.json. The node_modules directory is also created and your installation packages and dependencies are stored.

A yarn.lock or package-lock.json will also be created to ensure that installed packages in your project have consistent installation and compatible dependencies.

Create your first page

Nuxt.js converts all. Vue files in the Pages directory into application routes.

Create the Pages directory in your project:

touch pages
Copy the code

Then create the index.vue file in the Pages directory.

touch pages/index.vue
Copy the code

The page called index.vue is important because it will be the default home page that Nuxt displays when you open the app.

Open the file index.vue in an editor and add the following:

<template> <h1>Hello world! </h1> </template>Copy the code

Start the project

To run the project, type the following command on your terminal:

yarn dev

npm run dev
Copy the code

We use the dev command when running the application in development mode

The application now runs on 3000.

Click the link on your terminal to open your browser and you will see the following text “Hello world” which we copied in the previous step.

When nuxt.js is opened in development mode, it listens for file changes in most directories, so there is no need to restart the application when the editor adds a new page. The.nuxt folder is created when you run the dev command. This folder must be ignored by version control. Files can be ignored by creating an.ignore file at the root level and adding.nuxt.

Eggs out of step

Create a page in the Pages directory and name it fun.vue.

Add a
and include a header and an interesting sentence in it.

Then, go to your browser and open the page localhost:3000/fun.

Creating a directory named more-fun and putting an index.vue file in it will get the same result as creating a more-fun.vue file.