Nuxt.js (Next) is a framework for building Vue.js applications.
https://nuxtjs.org/

There are several ways to set up a development environment with Nuxt.js, but in that, we will look at two installations (project creation) methods.

nuxt-community / starter-template

Minimal configuration starter template. Only Nuxt.js + Babel ESLint will be installed.
https://github.com/nuxt-community/starter-template

But the official page
, “I created the project in a non-recommended .create-nuxt-app.”
And it is written big time.

It seems that the repository is also archived and there is no further development so I will try it for the time being, but although the same configuration can be created with create-nuxt-app described later, it may not be necessary to dare to use it. Hmm.

System requirements

To use starter-template, the following must be met.

  • node 8.0 or higher
  • npm 5.0 and above
  • vue-cli 2.1 or higher

Install

When installing Nuxt.js using starter-template, create a command in the following format.

vue init nuxt-community/starter-template [ Project Name ]

I will actually install it. Move to the place where you want to create (install) the project and hit the following command.

# Move to the location you want to install
cd /path/to/dev

# Create project
vue init nuxt-community/starter-template nuxt-sample-1

When you hit the command, you will be asked the following three points.

  • Project name
  • Project description
  • author

These are attached to package.json. Even if you do not fill it in, the default will be inserted, so enter it if necessary, but you can edit it later, so ENTER is OK for the time being.

? Project name (nuxt-sample-1)
? Project description (Nuxt.js project)
? Author (rito <xxx@mail.address>)

Once the project is created you will see the following:

vue-cli  Generated "nuxt-sample-1".

To get started:

cd nuxt-sample-1
npm install # Or yarn
npm run dev

At this point, the template has just dropped, so move to the created project (directory) and install the dependent packages as instructed.

# Move to project root
cd nuxt-sample-1

# nuxt.js install
yarn
or
npm install

After installation is complete, hit the following command to start the development server.

# For yarn
yarn dev

# For npm
npm run dev

Once started, access the http://localhost: 3000/ from your browser, and the initial screen will be displayed.

Read also >>  Lara Overflow - Q&A platform using Laravel and Vue.js

As you can see from the package.json, it is a simple minimum configuration.

{
"name": "nuxt-sample-1",
"version": "1.0.0",
"description": "Nuxt.js project",
"author": "rito <xxx@mail.address>",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"nuxt": "^2.0.0"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"eslint": "^4.19.1",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.1.1",
"eslint-plugin-vue": "^4.0.0"
}
}

nuxt / create-nuxt-app

Nuxt.js is an official project creation tool provided by Nuxt.js.
https://github.com/nuxt/create-nuxt-app

System requirements

The following must be met:

  • npx (bundled by default since npm 5.2.0)

Install

First, install create-nuxt-app itself. You can install it with the following command.

# create-nuxt-app install 
npm i -g create-nuxt-app

I use it here and there for no particular reason, so I installed it globally with the -g option. You can use this area as you like.

Project creation

When installing Nuxt.js using create-nuxt-app, create a command in the following format.

create-nuxt-app [Project Name]

I will actually install it.

# Move to the place where you want to create the project
cd /path/to/dev

# Nuxt.js Create project
create-nuxt-app nuxt-sample-2

Hitting a command will do some input & selection.

? Project name (nuxt-sample-2)

? Project description (My superb Nuxt.js project)

? Author name ()

? Choose the package manager (Use arrow keys)
❯ Yarn
Npm

? Choose UI framework
❯ None
Ant Design Vue
Bootstrap Vue
Buefy
Bulma
Element
Framevuerk
iView
Tachyons
Tailwind CSS
Vuetify.js

? Choose custom server framework
❯ None (Recommended)
AdonisJs
Express
Fastify
Feathers
hapi
Koa
Micro

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ Axios
◯ Progressive Web App (PWA) Support

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ ESLint
◯ Prettier
◯ Lint staged files

? Choose test framework (Use arrow keys)
❯ None
Jest
AVA

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR)
Single Page App

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯ ◯ jsconfig.json (Recommended for VS Code)
Read also >>  Laravel Passport Create REST API With Authentication

When the installation is complete, the following will be displayed.

Successfully created project nuxt-sample-2 

To get started:

cd nuxt-sample-2
yarn dev

To build & start for production:

cd nuxt-sample-2
yarn build
yarn start

At this point, unlike the starter template, the dependent packages have already been installed.

Navigate to the project created according to the displayed guide, start it, and access http://localhost: 3000/ from the browser, the initial screen of Nuxt.js will be displayed.

Change application directory

As you introduce various tools to your project, they will be cluttered with configuration files and directories. At that time, moving only the application part of Nuxt.js to another directory will make it cleaner.

The directories and files created during installation will differ slightly, but the contents under the project root when ESLint and Jest are installed are as follows.

project_dir 
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── static
├── store
├── test
├── .babelrc
├── .. editorconfig
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├── nuxt.config.js
├── package.json
├── README.md
└── yarn.lock

Create a new directory in it and move only the Nuxt application part into it.

project_dir 
├── src
| ├── assets
| ├── components
| ├── layouts
| ├── middleware
| ├── pages
| ├── plugins
| ├── static
| └── store
├── node_modules
├ ── test
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── jest.config.js
├── nuxt.config.js
├── package.json
├── README.md
└── yarn.lock

Once moved, edit the configuration file to apply this change.nuxt.config.js

export default {
  srcDir: 'src', // Add

A description specifying the application directory is added. (Additional locations are all right.)

Read also >>  Evan You - State of VueJS 2018 | Vue.js Amsterdam Conference

If you have done so far, start Nuxt again and if it works without problems, you are done.

Summary

If there is no particular reason, you can smoothly build the development environment with Nuxt.js if you build the environment with create-nuxt-app .

LEAVE A REPLY

Please enter your comment!
Please enter your name here