Fact: Since I started using Vue, it became easier to develop.
In this article, I will talk about my journey using Vue and why you should consider Vue when working with Laravel as the back-end framework.
What is Vue?
Vue is a progressive framework. Mainly focused on building user interfaces. It is focused on the view layer of an application. Therefore, it is easy to integrate with any other backend framework.
In fact, you can build a single page application with Vue on its own.
Vue will update an element without reloading the entire DOM. Because of Vue copies and stores the DOM to its state. Which makes it possible to update the element without reloading it.
What is Laravel?
Laravel is one of the most popular new generation web app frameworks.
It follows the Model View Controller (MVC) model framework and it is an open-source framework.
Additionally, it makes the web app development process enjoyable and pleasing without sacrificing functionality.
Why use Vue with Laravel?
Vue is a pure front-end framework.
With that in mind, you can make full-scaled applications with event-driven components.
Also, you can use these composable components anywhere in the app, even with Laravel’s Blade files.
Because of it, the Laravel application gets the ability to change DOM without reloading the page.
Because of it, many performances issues come in to play. Additionally, there can be many edge-case errors that might happen with many DOM events.
Vue eliminates that with its speed and smoothness of component updates. Not only that but also it will reduce the noticeable performance lags in the page.
Vue keeps track of each component and its dependencies. This makes it easier to update or render a change of data. Notably, that small change can drastically improve application efficiency.
The above statistics were taken from Google Chrome Lighthouse with a 3G network and 4x CPU slow time. Significantly, Vue showed tremendous results with speed and performance.
Basic Usage with Laravel
As I mentioned above, Vue components can be used within the Blade files.
If you are not familiar with Laravel, you can check the documentation which will help you get started (Read more).
If you do a fresh install of Laravel it comes with few Vue example components. Read more front-end scaffolding.
To explain, I will give a brief explanation of the Vue component.
<template> holds the HTML template for the page we are making. If we do not enclose the HTML in the template tag, we would have to specify what the template is.
This can be done by linking to an external file, or by assigning the entire template content as a variable to Vue.
Next, we have the script section on the page where we define the entire logic that controls the page.
The last part is the style section. We added a parameter to it – scoped simply to tell Vue to apply these style to this component only.
Before using the component in the Blade file, we need to add it to the resources/js/app.js where Laravel mix compiles it to the public/js/app.js file.
As shown above, the Vue component will get compiled with Laravel mix. This lets us use the component in any blade file in the application. You can simply use the component in the blade file with ‘<example-component>’ tag. example-component is the name you provide when registering the component with Vue.component command.
Additionally, Vue 3 was released recently. You can have a look at it from the video below.
In conclusion, Vue.js is a powerful framework to use as the front-end for your Laravel application. As mentioned above, there are many benefits you could use instead of using some other framework.
Above all, Laravel comes with Vue.js included, which makes it much easier to integrate.
Below figure is a demo of one of our applications which we developed using Vue and Laravel.
At Fonseka Innovations, we have been using Vue.js and Laravel to build some powerful tools and web applications. If you have any innovating ideas or even some old web application that needs a good revamp, contact us.