Shulou(Shulou.com)06/02 Report--

This article mainly explains "Why to use Nuxt.js on Vue". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn why you use Nuxt.js on Vue.

Nuxt.js is a front-end framework based on Vue.js that provides good development features such as server-side rendering, automatic routing generation, improved meta-tag management, and SEO improvements.

Why use Nuxt.js on Vue?

Nuxt.js provides many benefits for front-end developers, but there is a key feature that led us to finally decide to use this framework-- SEO improvements. Our application needs this feature because it is not a typical internal SPA (single-page application). This is a public web application that includes social sharing and management functions.

When it comes to social sharing, Nuxt.js has good meta-tag management, so we can easily create specific, customizable social sharing windows based on the data received by the back end.

So how do SEO improvements work?

To improve SEO,Nuxt.js, use SSR (server-side rendering). SSR renders the Vue.js component as an HTML string on the server (Node.js) after obtaining the AJAX data. After completing all the asynchronous logic, it sends them directly to the browser and eventually provides the static tags to the fully interactive application on the client. This feature allows you to parse DOM elements well using a Google SEO parser. The SEO parser parses the DOM element at great speed as soon as it loads the Web site DOM.

On the other hand, typical SPA applications use frameworks like Vue to build Vue.js, React, Angular, and so on, all of which fetch data from the back end with AJAX after DOM is loaded, so the SEO parser cannot parse all DOM elements because they have not yet been rendered. AJAX extraction is asynchronous, while SEO parsing is not.

Nuxt.js needs a different mindset from Vue.

Nuxt.js and Vue.js handle logic very differently. The main difference is that Vue always runs on the client side, while Nuxt does not run on the client side, which can cause major problems in some cases. For example, if you want to select the DOM element immediately after the application is loaded, the application may run on the Node. js side, but of course there is no DOM element in Node.js.

The same thing happens when accessing the browser's local storage. This is the main reason why Nuxt uses cookie on local storage-- because they are always accessible.

With Vue, we won't encounter this kind of problem, because it always runs on the client, so we don't have to worry about these potential problems.

Let's take a look at how to handle these types of potential problems in Vue and how to handle them in Nuxt-- with actual code examples.

The most important thing in this figure is the early return of the "created" method. Nuxt has a globally accessible object "process" that shows whether we are currently running on the server side or on the client side. The logic behind the code we see focuses on managing socket connections, and obviously, if we are running on the server, we do not want to update the DOM when we receive the socket event, because there is no DOM on the server side.

If this is a Vue.js application, the code will be the same except for the early returns-- because the process will always run on the client and there is no need to check that particular statement.

Nuxt.js generates its own router based on the folder structure, while for Vue.js, it must be done manually-- but keep in mind that both principles have their pros and cons. The advantage of automatically generated routes is that it is easier and faster to create routes; you only need to create directories and files, and Nuxt can do all the work. But the disadvantage is that it is less controllable and manageable than manual writing.

Compared with manually generated routers, Vue.js allows you to easily add your own logic to the router, import services, and have more routing management control. This principle is time-consuming and complex, but it doesn't always mean it gets worse.

Is Nuxt.js ready for enterprise applications?

In the past, there were two main factors that prevented Nuxt.js from being used in enterprise applications:

Typescript support is not good

Poor server-side error handling

When we were in the research phase of the project (about six months ago), there was no reliable Typescript starter kit or configuration worth the risk. Due to a large number of linting errors and missing types, we decided to use Vanilla JS (ES6 +). At the same time, Typescript support for Nuxt.js has been greatly improved, and new starter kits and configurations are now available without worrying about Typescript-related issues.

Poor server-side error handling is the biggest and most demanding problem we have to solve when developing Nuxt.js applications.

When the code is executed on the Nuxt.js server (Node.js) side, the application throws very irrelevant error messages, and debugging and fixing these same errors is really difficult and complex. To simplify debugging, it is necessary to handle Node.js errors in a specific way.

Now, with better Typescript support and a deeper understanding of SSR, I can say for sure that Nuxt.js is ready for medium-and enterprise-level applications, but there is still room for improvement-such as better error handling and AJAX management on the Node.js side of Nuxt.

Nuxt application structure

Nuxt.js and Vue.js have a very similar architecture. There are only two main differences:

Router

Main App.vue component

Nuxt generates router logic and its routing based on the directory and file structure of the page. For example, if we create a directory and file about/index.vue, Nuxt.js automatically creates a route / about for the page. There is no need to define or configure routes anywhere else in the application.

For nested routes, you only need to create a directory within the parent directory-- about/me/index.vue will generate about/me routes. For creating dynamic nested routes or nested routing parameters, all you need to do is name the subdirectory with the lodash prefix-- user/_id / index.vue will create dynamic nested routes for the user based on the user's ID.

Another structure-related feature of Nuxt.js is very interesting-layout. The Vue.js application has the main App.vue file, which is the main root component wrapper for all application components. Nuxt.js uses layouts, where each layout acts as a separate wrapper for the application components. For example, if we want certain pages to use different UI libraries, global CSS styles, font families, design systems, meta tags, or other elements, we can define what layout to use as its parent root component. By default, all Nnux.js pages use default.vue layouts.

The structure of Vuex in Nuxt.js is almost the same as in a normal Vue.js environment-- with store modules. This structure is optional, but it is strongly recommended that you do better structure and code maintenance. Each store should be structured and modular based on application logic and data flows. For example, if the application contains authorization logic, we must create an authorization store module for all authorization data and logic in store, such as login, logout, cookie, tokens, user data, and so on.

Thank you for reading, the above is the content of "Why to use Nuxt.js on Vue". After the study of this article, I believe you have a deeper understanding of why you use Nuxt.js on Vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.