Introduction to Single Page Applications (SPA)

We have already gone through a lot of things so far, but perhaps this is the most anticipated section of the course. In this section, you will learn how to build single page applications also referred to as Sbas. You can certainly use Vue.js without building a single page application as we've seen so far. But usually people use a large JavaScript framework with the purpose of building an. Let's take a step back for a moment. In case you are not familiar with the concept of single page applications. Traditional websites work in the way that your browser sends an Http request to a web server, which then responds with the HTML needed to display the requested page. After the page has been rendered by the browser, you might manipulate it with some JavaScript code or make the page more interactive. This could be done by using jQuery or perhaps even Vue.js for parts of the page as we saw earlier in the course. But essentially the web server responds with the complete markup needed for the browser to render the page, which it can then interpret directly. Single page applications, on the other hand, work a little differently. The browser, of course, still makes an Http request to the web server, but the server responds differently. Instead of responding with the full HTML markup for the page, it only sends a part of the markup in return. This includes the base HTML markup, which would be the index.html file that you've seen in the previous section. This markup includes an element where the content for the requested page will be inserted plus a script tag for Vue.js. Since we've been using Webpack in this course, this script tag would include our Webpack bundle, which includes both Vue.js itself as well as our application. For a more advanced setup, this would probably be split into two bundles. Of course, you might also have other script tags or stylesheets for global styles, particularly if you're using a framework like Bootstrap. So the browser just receives a skeleton from the server, which doesn't really render anything except for a loading animation or something like that. Whenever Vue.js boots up, it renders the appropriate components within the element in the skeleton markup that was returned from the server. This means that the content for the various pages of an application is rendered through JavaScript instead of being returned from the web server. The server therefore only needs to return this super simple markup because the rest of the work gets done through JavaScript instead of on the server. So in that regard the backend is simpler, but it also means that any data required for rendering the various pages must be retrieved through Http requests instead of just being embedded directly within the HTML markup that comes from the server. We have previously seen how to render components within the skeleton being the index.html file. In this section, we're going to look at how to work with multiple pages in an application and how to instruct Vue.js to render the correct page when receiving the skeleton markup from the web server. For this purpose, we'll be using a library named Vue Dash Router. Remember, that view is made of several libraries apart from the core library, which we can then add to our project as needed. So without further ado, let's install the Vue router library and get started on building our first single page application.