[Laravel + VueJS] Let’s build an SPA website together (Part 1)

Question

The structure of a website is often divided into sections such as Header, Content, Footer. This has been done in the traditional way using the client/server , where each page must be loaded from the server with a different URL. To navigate to a new page, the browser must send a request to its URL. The server sends the data back and the browser may have to render a new page . For an average internet connection, this process can take several seconds , during which time users must wait for the page to load. Why do we bother to wait for rendering a whole new page with enough component while what we need really just the Content of it ??

The concept of SPA was born

To solve the above problem, there is a technique that is quite popular, which is SPA (Single Page Application), is called the Single Page Application =)))))

The advantage of SPA is that it can create a more seamless experience for users. The data for new pages still has to be retrieved and therefore will create some small interruptions to the user’s stream, but this disruption is minimized because the data retrieval can be done asynchronously. the set. In addition, since SPA pages often require less data due to reuse of some page elements, the page loads faster.

Put simply, the entire resource of the web including CSS files, Javascript, master layout or web page structure will load the first time when we start browsing a certain website A. At later times, when switching to another page, the client will send ajax requests to get the necessary data (usually the content). The concept of SPA online is a lot so I just talked about it here. Let’s put together practice of building SPA with Laravel and VueJS

Library settings

In the article Laravel + Vue.js: Handling the error message I mentioned through the installation as well, but applying VueJS to Laravel, so those who are still wandering about this part can check it out.

In this tutorial, I only need to use the only library that is: Vue-Router , Other libraries I will introduce in the following sections.

• Vue-router: helps routing in the application (defining routes and mapping it with Vue components).

You run the following command to install packge vue-router

Ok Done

Edit the layout

When deploying SPA between these two guys, the routes I will use are in vue-router, so we need to modify a little bit of Laravel’s routes / web.php file.

Create a controller named VueController with content

The above command, when there is any request, it will fly into the VueController function index to return to the index.blade.php file Create help yourself file index.blade.php in the resources / views / app / index.blade.php directory Its like this

The most important is in the div app there, because this part I will divide the Vue layout into Components and later here in the app.js file I will render into the #app element First of all you build help me layout Vue components look as follows

Next I need to correct a bit of resources / js / app.js

The content of the App.vue file is just this

Write a little content in the content file any more I will use vue-router to connect them later

HelloWorld.vue

ContentOne.vue

ContentTwo.vue

Now we will go to the definition of routes at routes.js

Above you can see when the user accesses the path: “/” it will render the Index component and then it will move to / home defined the children whose component is HelloWorld. Why is it in children? It’s simple because in the index.vue file I will only define the layout in which the content is <router-view> </router-view> It will render in the tag pair. that =))).

The content of Index.vue looks like this