Difference between revisions of "Introduction to Nuxt.JS"

From WikiOD
Line 44: Line 44:
=====Flow chart=====
=====Flow chart=====
The following figure illustrates the flow of Nuxt.js application from a complete server request to rendering (or the user switches the route to render the page via <nuxt-link>):
The following figure illustrates the flow of Nuxt.js application from a complete server request to rendering (or the user switches the route to render the page via <nuxt-link>):
=====Server-side rendering (via SSR)=====
=====Server-side rendering (via SSR)=====

Revision as of 09:44, 24 August 2021

About Nuxt.js

On October 25, 2016, the team behind zeit.co released Next.js, a React server-side rendering application framework. A few hours later, similar to Next.js, a server-side rendering application framework based on Vue.js came into being, which we call Nuxt.js.

What is Nuxt.js?

Nuxt.js is a universal application framework based on Vue.js.

Through the abstract organization of the client/server infrastructure, Nuxt.js mainly focuses on the UI rendering of the application.

Our goal is to create a flexible application framework, based on which you can initialize the infrastructure code of a new project, or use Nuxt.js in an existing Node.js project.

Nuxt.js presets various configurations required to develop server-side rendered applications using Vue.js.

In addition, we also provide a command called nuxt generate, which provides the function of generating corresponding static sites for Vue.js-based applications.

We believe that the function provided by this command is a new step towards the development of web applications that integrate various microservices.

How does the Nuxt.js framework work?

Nuxt.js integrates the following components/frameworks for the development of complete and powerful web applications:

After compression and gzip, the total code size is 57kb (60kb if Vuex features are used).

In addition, Nuxt.js uses  Webpack  ,  vue-loader  , and  babel-loader  to handle automated code construction (such as packaging, code layering, compression, etc.).

  • Based on Vue.js
  • Automatic code layering
  • Server-side rendering
  • Powerful routing function, support asynchronous data
  • Static file service
  • ES2015+ syntax support
  • Packaging and compressing JS and CSS
  • HTML head tag management
  • Local development supports hot reloading
  • Integrated ESLint
  • Support various style preprocessors: SASS, LESS, Stylus, etc.
Flow chart

The following figure illustrates the flow of Nuxt.js application from a complete server request to rendering (or the user switches the route to render the page via <nuxt-link>):

Server-side rendering (via SSR)

You can use Nuxt.js as a framework to handle all UI rendering of the project.

When nuxt is started, it will start the development server with hot update loading, and the Vue server-side rendering is configured to automatically render the application for the server.

Single Page Application (SPA)

If you don't want to use server-side rendering or require static hosting from your application, you can use the nuxt --spa command to use SPA mode. It provides you with a powerful SPA deployment mechanism without using Node.js to run applications or any special server-side processing.

You can check various commands provided by Nuxt.js   to learn more about usage information.

If your project has its own web server (such as a web service started with Express.js), you can still use Nuxt.js as a middleware, responsible for the UI rendering part of the function. In the process of developing general web applications, Nuxt.js is pluggable without too many restrictions. You can   learn more about it by using Nuxt.js in development coding .

Static (pre-rendering)

Supporting the staticization of Vue.js applications is regarded as an innovation of Nuxt.js, which is achieved through the nuxt generate command.

This command statically converts each route into a corresponding HTML file according to the route configuration of the application.

For example, the following file structure:

-| pages/
----| about.vue
----| index.vue

After being static, it becomes:

-| dist/
----| about/
------| index.html
----| index.html

Static allows you to host your web application in any static site service provider.

The official website of Nuxt.js is an excellent example. It is statically hosted on  Netlify  . You can also refer to our  source code  .

We don't want  to manually execute the nuxt generate command to generate static files every time we update and deploy the  @nuxt/docs repository , it will trigger Netlify's hook application:

  1. Clone the  nuxtjs.org repository
  2. Use the npm install command to install dependencies
  3. Run npm run generate
  4. Generate dist directory

We now have a server less automatic static web application :)

We further consider the scenario of e-commerce applications, using nuxt generate, can the application be statically deployed on the CDN server? Whenever the inventory of a product changes, it will re-satirize and update the product inventory. But what if it happens to be updated when the user visits it? We can ensure that users access the latest data by calling the e-commerce API. Compared with traditional e-commerce applications, this static solution can greatly save server resources.