Learn about NuxtJS

Tram Ho

Preamble

Continuing with the previous series, Vuejs, in this article I will introduce Nuxtjs. Let’s see what NuxtJs has in common, nothing cool compared to Vuex.

Introduce

Nuxt’s homepage also states Nuxt clearly:

Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt’s goal is to make web development powerful and performant with a great developer experience in mind.

In simple terms: Nuxtjs is a framework built from Vuejs, official libraries (Vuex, Vue Route) and tools (webpack, Babel and PostCSS). Nuxt’s purpose is to make the development strong and effective.
NuxtJS was created by To create the Universal App, similar to NextJS on React, so that the application code with source code runs on both the server and the client.
It builds the user interface (UI rendering), which abstracts the distribution between client and server.

Nuxt.js preloads all the configuration needed to easily create a Rendered Server of a Vue.js application.

In addition, Nuxt.js also provides another deployment option, called: nuxt generate. It will build a Static Generated for Vue.js application. This choice could be a big step forward for developing Web applications on microservices.

As a framework, Nuxt.js has many features to help you develop between client and server, such as: Asynchronous data, Middleware, Layouts, …

Nuxt.js includes the following frameworks to create a web application:

  • Vue 2
  • Vue Router
  • Vuex
  • Vue Server Renderer
  • Vue-meta

In essence, Nuxt.js uses webpack with vue-loader and babel-loader to group, shred code, and reduce code.

Features:

  • Allow file format is * .vue
  • Automatically shred code
  • Powerful Routing System with asynchronous data
  • Provide static file
  • Self-compiled ES6 / ES7
  • Group and shorten JS and CSS code
  • Manage the <head> information
  • Hot module
  • Pre-processor
  • HTTP / 2
  • Extend with Module architectureAs we all know Vuex develops applications in the form of SPA (Single Page Application). When we load the first page what we get is an empty body page and then js will build the content. That will create a pretty big drawback with our web is SEO. So what is SEO? You can go awry to understand it in more detail. The SEO category of google would be as follows:
    Search the content of your web page to see if it matches the search results and then proceed to process it, but our web has nothing but an empty body.
    So is there any way to solve this problem?
    Nuxtjs was born to solve this problem. Nuxt uses SSR (Server Side Rendering – which is the data that will be rendered by the Server). The first request Nuxt will return the html file with all the information you need. From there google can read the content and bring up search results with your application.

Install

The theory is too boring, install it and see what it has:

Or use yarn:

A few questions will appear to customize your application. And test run:

That was quick and easy. Let’s see what its directory structure has:

assets
  • A place to store bundled files from webpack, css, scss, js, images
components
  • A place to store components for pages. For example, component AddProduct, ListUser …
layouts
  • A place for layouts of pages
    For example: Header, Footer, Sidebar
middleware
  • This place will contain middleware for your application. You can customize these middleware in a fairly simple way. Middleware will automatically be run before the interface is rendered. Declaring middleware is also very simple.
pages
  • This is where the application’s page is stored.
  • For example: page home, user, …
plugins
  • Here you can import plugins before declaring them in the root file of the application.
static
  • Contrary to assets, this will contain resources that are not packaged by webpack. It will be automatically retrieved and automatically accessed until called.
  • For example:

store
  • It is the storehouse of vuex.
nuxt.config.js
  • This is where the information about configuration, declaration of dependencies in the application.

Routing

With Vuex, we will have to declare the link router, vue router
You can refer to your Vue Router here
A special feature of Nuxt is that Nuxt will automatically render the router for us corresponding to the pages.
For example:
Our page directory is as follows:

And then we will get the router as follows:

Nuxt has automatically mapping the router with each file in the page directory. It is simple and fast.
You can test create files with folders on the page and go out to test it

Import Dependence

Suppose I want to use the axios library I will run the command

Then when used, we import into that page and use normally. However, with Nuxt, we only need to import into the nuxt.config.js file as follows:

This is convenient, isn’t it?

Epilogue

Thank you for reading my article. The above are just the basics to get started with Nuxtjs. You can read more details at the homepage of Nuxt

Share the news now

Source : Viblo