Vue and Laravel | Fonseka Innovations
Vue and Laravel

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.

In fact, the number of developers who uses Vue is growing each year. Additionally, developers who wanted to integrate Vue increased from 8.7% in 2016 to 40.5% in 2019. In the same surveys, Vue earned more than 90% as a framework with the highest satisfaction rating among users. (Source: State of JavaScript 2019)

What is Vue?

Vue.js | Fonseka Innovations
Vue Introduction

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 also helps with solving many difficulties and inefficiencies that cause with Document Object Model (DOM) of JavaScript.

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.

Similarly to JavaScript frameworks, Vue responds to events and triggers changes on the DOM instantaneously.

What is Laravel?

Laravel | Fonseka Innovations
Laravel Introduction

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?

Why Use Vue.js Framework?

Compatibility

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.

Performance

With the increase of the volume of the data, the application will lag because it is hard to keep track. As a matter of fact, this is one of the main problems with JavaScript frameworks.

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.

Performance Statistics - Vue | Fonseka Innovations
Performance Statistics – Vue

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

Usage of Vue and Laravel | Fonseka Innovations
Usage of Vue and 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).

Vue Components

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.

Example app.js with Vue.js component | Fonseka Innovations
Example 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.

For further Vue and Blade configurations, have a look at it from Vue.js and Laravel documentation.

Vue 3

Additionally, Vue 3 was released recently. You can have a look at it from the video below.

Vue.js 3: The Future of Front-end

Conclusion

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.

BatterySelector - Demo Application | Fonseka Innovations
BatterySelector – Demo Application
Fonseka Innovations
Fonseka Innovations

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.

References

About the author

1 Response

Leave a Reply

Sign up to our newsletter.



We’d Love to talk about your next venture. Get in touch and we can start turning your idea into reality. Hope to hear from you soon!