1. Introduction to the NUXT framework.JS

The PDF version of this document is available |HERE|.

The examples in this document are available |HERE|.

This document is part of a series of four articles:

|Introduction to the PHP7 language through examples|;

|Introduction to the ECMASCRIPT 6 language through examples| ;
|Introduction to the VUE.JS framework through examples|;
|Introduction to the NUXT.JS framework through examples|. This is the current document;

These are all documents for beginners. The articles follow a logical sequence but are loosely coupled:

the document [1] introduces the PHP 7 language. Readers interested only in the PHP language and not in the Javascript language covered in the following articles should stop here;
the documents [2-4] aim to build a Javascript client for the tax calculation server developed in document [1];
the frameworks Javascript, [vue.js], and [nuxt.js] in Articles 3 and 4 require knowledge of Javascript from the latest versions ofECMASCRIPT, and those of version 6. The [2] document is therefore intended for those who are not familiar with this version from Javascript. It refers to the tax calculation server built in document [1]. Readers of [2] will therefore sometimes need to refer to document [1];
once ECMASCRIPT 6 has been mastered, we can move on to the VUE framework.JS, which allows you to build clients and Javascript that run in a browser in SPA mode (Single Page Application). This is the [3] document. It references both the tax calculation server built in the [1] document and the standalone client code Javascript built in [2]. Readers of [3] will therefore sometimes need to refer to documents [1] and [2];
once VUE.JS has been mastered, we can move on to the NUXT framework.JS, which allows you to build clients and Javascript that run in a browser in SSR mode (Server Side Rendered). It refers both to the tax calculation server built into the [1] document, the standalone client code Javascript built in [2], and the application [vue.js] developed in the document [3]. Readers of [4] may therefore need to refer to documents [1], [2], and [3];

This document continues the work done in document [3] using the VUE.JS framework.

This section focuses on the following architecture:

In [1], a web browser displays [5, 7] web pages from a [3] server intended for a user. These pages contain Javascript implementing a client for a [2] data web service as well as a client for a [3] web page fragment server;
In [2], the web server is a data server. It can be written in any programming language. It does not generate web pages in the traditional sense (HTML, CSS, Javascript) except perhaps the first time. However, this first page can be obtained from a traditional web server [3] (not a data server). The Javascript of the initial page will then generate the various web pages of the application by retrieving the [4] data to be displayed from the web server, which acts as a data server ([2]). It can also retrieve web page fragments [5] to format this data from the web page server [3];
in [4], the user initiates an action;
in [6,7]: they receive data wrapped in a web page fragment;

The [nuxt.js] framework |https://fr.nuxtjs.org/| will allow us to implement the following workflow:

The first page of the application is served by the [node.js] [3] server. In addition, the other pages of the application are also hosted on this same server. They are served when the user manually types their URL into the browser. These pages embed a URL application (approximately);
once the first page is loaded in the browser, the application behaves like a standard [vue.js] application. In our diagram above, it will then communicate with the [2] data server;

Ultimately, the application behaves like a [vue.js] application except for the first page and when the user manually enters URL. In these cases, the page is retrieved from the [3] server. When a search engine requests the various pages of the application, it receives the pages from the [3] server. These may have been optimized for SEO (Search Engine Optimization). In a [vue.js] application, the search engine receives a page with little relevance, SEO. For example, in the client application of the tax calculation server for document [3], the page received by the browser when the application started was as follows:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

This is the only page loaded by the browser. All other pages in the application are dynamically generated by Javascript without the browser’s involvement. Some search engines are satisfied with this page. Others go further by executing the Javascript contained within the page (line 9 above). Another page is then generated. This page may contain an asynchronous operation to fetch the data the page will display. In this case, search engines do not wait. We are then left with an incomplete page. You may recall that this is the case with our [vue.js] client on the tax calculation server: asynchronously, while the first page is loading, it initializes a jSON session with the tax calculation server. In this specific case, this does not affect the page retrieved by the search engine. For other applications, this could be detrimental in terms of SEO.

With [nuxt.js], we can serve the search engine a more meaningful page for each of the application’s pages.

The scripts in this document are commented, and their console output is reproduced. Additional explanations are sometimes provided. The document requires active reading: to understand a script, you must read its code, comments, and execution results.

The PHP 7 server application can be tested here.

Serge Tahé, December 2019