Fully Working Vue.js SPA

In this lesson, the fully working MEVN stack application is presented. The front-end is based on Vue.js and the backend is composed of Node.js server and MongoDB database. Dive into the details of the application provided.

Vue.js application execution infrastructure

Vue.js does not execute all the application code in the backend server. Instead, it sends part of the application logic that is responsible for managing the frontend screen, to the client. After providing the client with all the application frontend code, it only sends and receives the required data from the client machine. All execution with the provided data is done on the client’s machine. It is the responsibility of the front-end code running on the client’s machine to ask for data and send data to the backend server. Moreover, it also performs all other operations such as changing views and toggling different components of the app without even contacting the backend server. This infrastructure has two advantages:

1. It leverages the client machine’s processing resources to run the app which reduces the load on the server and makes the backend server simpler.
2. It makes the user experience much better because a request does not have to be sent to the backend server for every action which saves time.

The Vue.js frontend server

When a client contacts a Vue.js based web application over the Internet, it actually contacts the Vue.js server running on the host machine. The Vue.js server provides the client with all the files and resources necessary to run the web application. It not only provides the front-end ...