Why should you use Vue.js when using Laravel

If you have used a recent Laravel version, you would notice it usually comes with Vue bundled in with other tools like Bootstrap and jQuery. You would also notice in Laravel documentation that they gave a small introduction to using Vue components. Is this a sign that Laravel loves Vue?

How does Vue work?

If you have programmed for the web before the era of event-driven frontend JavaScript frameworks, you would understand there are considerable difficulties and inefficiencies that arise from trying to update the Document Object Model (DOM).

To update the DOM directly means you would have to take the page, make the change to a small part of it, then reload the entire DOM so the changes can take effect. If say you are watching a YouTube video and there is a new comment, the entire page would reload and your video would have to start afresh.

Vue tries to solve these challenges by utilizing a virtual DOM to manage the view a user sees. Vue essentially creates a copy of the DOM and stores it. When a change is made to any part of the DOM, it just updates only that section of the DOM without reloading the DOM. This means the comments would update without you even noticing it.

Vue provides reactive and composable view components. Vue responds to events and triggers changes on the DOM instantaneously. Its composable components can be selected and assembled in various combinations to satisfy whatever need arises. You can have components for everything and reuse them however you need.

Why you should use Vue with Laravel

This is one question that you need to take your time to answer. It is important to understand what Vue has to offer and what that means for your work.

We are going to explore a few reasons why you should use Vue with Laravel.

Everything happens on the frontend

Applications on the internet today are event-driven. They are built to ensure users have a seamless experience like they would if they used an application installed on their computer.

Everything now happens on the frontend and users never have to reload a page again (thank you JavaScript).

Reactive components make for an excellent event-driven app

Vue lets you build a full-scale application that is event-driven and has all activity completely handle on the frontend. It also provides composable components that can be used however you wish. Given that it couples nicely with Laravel, you will only need to make a few trips to request data from your Laravel application and make UI changes by switching components without reloading the page.

You can trigger UI changes that are seamless with your Vue frontend, which in turn gives your users an amazing experience. It could be as simple as making a text on your page editable or swapping out an entire component to load up a video requested by a user without reloading the page.

Given Vue’s speed and performance, this happens very fast and smoothly without taking up so much of your computer resources.

Building optimal complex frontend pages

If you think of building an application with parts that need to update frequently, you have no other choice than to make the frontend run completely on JavaScript.

The challenge with vanilla JavaScript or jQuery or other JavaScript libraries that do not have a virtual DOM is that you quickly hit performance issues with the frequency of update increases or the volume of data to track for changes increases significantly. Changes to the DOM will gradually cease to be instantaneous and you begin to experience noticeable performance lags.

When you compose your application with Vue components, each component’s dependencies are automatically tracked during its render, so the system knows precisely which component actually needs to be updated when there is a change in data. This makes all updates to the DOM use minimal resources, thereby improving the overall application efficiency.

Vue is also compatible with state managers like Flux, Redux, and Vuex which are excellent in managing data flow in complex applications. Vue’s utilization of a one-way data binding model also makes state management easier in complex applications.

Single Page Application

I would like to share a personal opinion – Single Page Applications are the greatest thing to happen to the internet in the last decade. It opens up applications to a wider audience of users than was possible before.

When you consider that many internet users outside of some parts of America and Europe have challenges getting on the internet, you begin to appreciate the role single page applications play in delivering a rich web experience to them.

Your entire application assets get loaded once (and most of it cached), all that your application does as the user engages with it is request data which typically requires low bandwidth to fulfill.

Easy to learn and use

Vue is easy to get into. It provides very few options for you as the developer and has a lot abstracted away. You feel like you are writing plain JavaScript when you use Vue and you can make a simple application with plain JavaScript and it remains valid in Vue.

Another great thing about Vue is that your valid HTML is also a valid Vue template. You can keep your CSS external or you can process it with JavaScript depending on your application needs. You can also take advantage of scoped styling, to apply style changes to a single component on the fly without the change affecting other components.

Basic Vue usage with Laravel

Vue integrates nicely with Laravel. You can create Vue components and use them like you would use regular HTML tags inside your blade file. You can pass props to the component from the output generated when your blade file renders.

To try it out, create a new Laravel installation using the Laravel installer:

$ laravel new vueapp

If you do not have the Laravel installer, run the following command to get it:

    $ composer global require "laravel/installer"

When this is done, change your working directory into your new Laravel installation:

    $ cd vueapp

Install Vue and other JavaScript libraries your application needs to run:

    $ npm install

Setup your application to reload when you make changes to your js assets:

    $ npm run watch

If you like seeing your changes as you make them, especially since you are learning, then you should definitely run watch to watch the applications.