Hello everyone, today I will introduce about nuxt js, the article content includes the following

1. What is Nuxt.js?
2. Salient features of nuxt.js
3. Build demo application
4. Directory structure

What is Nuxt.js?

Nuxt.js is:

• A framework used to build applications from Vue.js.
• Pre-configured essentials (Asynchronous Data, Middleware, Layouts …) to make application development easier.
• Can run on server and client.

Salient features

Clear directory structure
Write code on .vue files
Divide the website into several pages, each of which is a separate file
Divide layouts, components, plugins … make the code easy to maintain and reuse.
Server-Side Rendering (SSR) and Routing system
Support SSR by providing a number of functions to manipulate when retrieving data, rendering views …
Routing by convention is the file name, supports dynamic routes, nested routes … (using vue-router).
Transpilation, bundling, minifying
Compile ES6 / ES7 code to be able to run on non-supported browsers (using Babel).
Bundling & minifyling code HTML, css & js (using webpack and some bundled libraries).
Some other features

• Dev environment with webpack-based support of Hot Module Replacement (HMR)
• Can be implemented with Express or other Node.js HTTP servers
• Easy to customize with Babel and Webpack config
• Automatic Code Splitting
• Package and compress js, css
• Manage head tags (vue-meta)
• Hot reloading in Development
• Pre-processor: SASS, LESS, Stylus, etc.
• …

Build demo application

First of all you need to install vue-cli, if it’s already installed then skip this step
npm install -g vue-cli
Go to the project installation directory and run the command to install
vue init nuxt-community/starter-template name-project
There will be some questions about the name projetc, and description, you just enter it:
The result will look like this:
You follow the instructions to run the project up

By default prj will run at port 3000, open localhost: 3000 browser to see it.

Directory structure

After successfully installing the prj above, we will have the directory structure of prj as follows:

• Assets folder
  Contains unmodified resources such as Stylus, Sass, images, or fonts
• Directory Components
  Contains components of vue.js
• Layouts folder
  Contains the layout (interface) for the application
• Middleware folder
  Containing application middleware, middleware allows you to define the protection function for pages, middleware will automatically be run before the interface is rendered.
• Pages directory
  This directory contains application views as well as routes definitions for the application.
• Plugins folder
  Contains javascript plugins
• Static folder
  Contains static files such as image files, automatically mapped, such as /static/logo.png file will be yoursite / logo.png
• Store directory
  Contains files of Vuex Store
• File nuxt.config.js
  Contains profiles set for your application
• File package.json
  Contains dependencies and scripts

End

If you have already learned about Vuejs, Nuxt.js is a framework worth learning about right now. Thank you for reading.