First impressions of Vue.js

Published: May 20, 2017 by C.S. Rhymes

I’ve been looking into different JavaScript frameworks for a while and there seems to be a big following for Vue.js throughout the Laravel community. Therefore, I thought I had better give it a look and see what its all about.

Code

Getting Started

The first thing I liked about Vue.js is that you can get started straight away by simply including a script tag into your page. You don’t need to spend hours getting a development environment set up or cloning down a starting package and working through all the files to try and understand what everything does.

Documentation

The next thing I would say is that the documentation is very clear and easy to understand. Each page of the documentation is very concise and to the point, but it is written in a way to help you learn the framework from scratch. The examples are written using standard HTML and JavaScript, which makes it instantly accessible for most web developers. You don’t need to know TypeScript or JSX to start using it.

Reactivity

The best thing about Vue is the reactivity. You create a new instance of Vue with a parent html element and now you can easily update the content. With JQuery you have to select the element and then update it. With Vue, its linked so you update the value in Vue and it instantly updates the value in the browser.

After using JQuery for many years it seems like magic. It just works. It feels like you should have to do a lot more steps to do than you actually have to. Its a great experience.

Functionality

All the basic functionality you will need is built in. There are loops, such as v-for, and conditional statements, v-if, and a way to get the value from an input using v-model.

If you need to perform a function when a button is clicked, you simply give the button a v-on:click=”method-name” property and it is tied to the method you create. No need to add an event listener to a particular button with a particular ID. You can even reuse the method multiple times by adding the property to what ever element needs it.

Components

To help you create reusable code, you can break things down into components. From reading other frameworks code this seems like common functionality and it is for good reason. You can even nest components within components.

One thing that I really like about Vue is the slot functionality. This allows you to insert the content on the page into your component, meaning you can easily pass content to it from a CMS by rendering it out on the page and then letting Vue re render it as needed.

As well as a generic slot, you can also create named slots. This allows you to be more specific by saying this content goes in this section of the component and this other content goes in this section.

Template strings

I have been reading about ES2015 or ES6 for a while and wanted to get started using it. Vue lets you define the html template in the JavaScript and when combined with ES6 it allows you to create multi line, readable templates using template strings. You can then use double curly braces inside the template strings to insert your variables.

This makes it easy to output and update dynamic content.

As a side note, I’ve found the new arrow functions to be very useful as they keep the context of this rather than having a new context inside the function.

Summary

I’m just getting started with Vue js but I can see why people are so excited about it. It has a certain way of using it but if you agree with that methodology then it really excels.

The thing I find hardest is having to go back to JQuery sometimes and having to do a lot more work to do something that is so simple in Vue js.

If you want to learn more then I suggest reading through the documentation to get the basics and then I would say take a look at the Learning Vue js series on Laracasts as it has some great examples of how you can use it.

Share

Latest Posts

Building a VS Code Extension for Gutenberg blocks
Building a VS Code Extension for Gutenberg blocks

I have been tasked with building a new website using WordPress. The last time I used WordPress was a few years ago and involved using Advanced Custom Fields to build custom pages and layouts. Things have changed a lot over the years and now there is the built in Gutenberg editor, which uses blocks to create a custom layout and add content. The trouble was, there didn’t seem to be great support in Visual Studio Code for the blocks, as they use HTML comments.

Using Pest to test Laravel Livewire validation rules
Using Pest to test Laravel Livewire validation rules

Last year I wrote a post about testing Laravel Livewire validation rules with PHP Unit. This post uses the same techniques as that post, but shows how to transfer it to Pest instead of PHP Unit.

Mocking window.location in Jest
Mocking window.location in Jest

Recently I had to write some tests for a piece of JavaScript code that used window.location. This left me trying to figure out how to mock the window.location so that I could pass in dummy data and ensure that the data I got back was what was expected. Here was how I managed to solve the issue.

How NOT to make a website

How NOT to make a Website

By C.S. Rhymes

From £8.99

Nigel's Intranet Adventure

Nigel's Intranet Adventure

By C.S. Rhymes

From £2.69