4 Essential ES2015 Features For Vue.js Development

4 Essential ES2015 Features For Vue.js Development

ES2015 (aka ES6) is the current specification of the JavaScript language. If you’re new to JavaScript or haven’t updated your JavaScript knowledge recently, there are a number of new features in ES2015 that make development much better and more enjoyable.

If you’re a Vue developer, you’d benefit from learning all these new features. But as a means of triage, you might start with those features that apply to Vue specifically.

In this article, I’ll show you four ES2015 features that you’ll use on a daily basis with Vue. I’ll provide an explanation and brief example of each.

  1. Arrow functions
  2. Template literals
  3. Modules
  4. Destructuring and spread syntax

1. Arrow functions

Arrow functions are a new way to declare JavaScript functions. They provide a shorter syntax, but differ from regular JavaScript function in other ways, too.

// Regular JavaScript function
function(parameters) {
  statements
}

// Arrow function
(parameters) => {
  statements
}

read more

Use a Vue.js Render Prop!

Use a Vue.js Render Prop!

TLDR; I show that Vue can use JSX to utilize the React pattern of a render prop. Source code here

In Vue, templates are typically how we compose/extend/mix/open source our components. This is contra the experience of React developers who write most of their compiled html in JSX.

Thanks to a similar architecture of using the virtualDOM + createElement API and babel-plugin-transform-vue-js, we can write our Vue components in almost the same way we write React! (Not that we should do this for all components, but it’s fun to see design patterns and utilize them).

UPDATE: I’m using render props in https://github.com/educents/vue-autosuggest in the renderSuggestion prop, so go check it out!

Render props demo

For demonstration, I will use an example from Use a Render Prop! article by Michael Jackson.

First the SFC:

read more

Managing User Permissions in a VueJS App

Managing User Permissions in a VueJS App

In authenticated frontend apps, we often want to change what’s visible to the user depending on their assigned role. For example, a guest user might be able to see a post, but only a registered user or an admin sees a button to edit that post.

Managing permissions in a frontend app can be messy. You may have written code like this before:

if (user.type === ADMIN || user.auth && post.owner === user.id ) {
  ...
}

As an alternative, there’s a neat little library called CASL that helps manage user permissions very simply. Once you’ve defined your permissions with CASL, and set an active user, you could change the above example to something like this:

if (abilities.can('update', 'Post')) {
  ...
}

In this article, I’ll demonstrate how to manage permissions in a frontend app with Vue.js and CASL.

Note: you don’t have to have used CASL before to follow this!

read more

Vue.js Developers Yearly Wrap Up - Top 5 Articles Of 2017

Vue.js Developers Yearly Wrap Up - Top 5 Articles Of 2017

2017 was the year that Vue.js went from “dark horse” to “major player” in the battle of JavaScript frontend libraries.

According to the recent State of JavaScript 2017 survey, Vue.js is the library that developers most want to learn in 2018. By a longshot. If the numbers hold true, Vue will be the most popular JavaScript library (after React) in the not-too-distant future.

It’s also been a great a year for the Vue.js Developers blog. We’ve sailed on the winds of Vue’s rising popularity and racked up almost a million views on our articles since launching in March this year.

In this post, I’ll recap the five most popular articles we released this year. I’ll also give you some things to look forward to in 2018, both for Vue.js and for this blog.

Vue.js Developers

If you haven’t visited this blog before, the mission is to help developers up their skill and knowledge of Vue.js and related tools, beyond what’s in the official documentation.

Vue.js Developers is more than the blog, though, with other assets including:

We’re also on social media platforms including Twitter and LinkedIn.

Blog stats

Since the launch of this blog in March 2017, we’ve released 44 articles with a combined 544,000 page views. From reposts of these articles on our Medium publication and several other publishing platforms, we’ve collected almost one million total views!

read more

Getting Started With TDD and Vue.js

Getting Started With TDD and Vue.js

Oftentimes, the hardest part of using test-driven development, or TDD, is getting started. You’ve got to download packages with weird dependencies, get your test suite working with your build system, and then you have to figure out how to write a test! It’s no wonder that so many developers start running away when you bring it up.

But, you’re no ordinary developer. You’re ready to start using TDD with Vue so you can be confident that your code is working exactly as intended. Together, we’ll get tests working in a new Vue project, walk through the default tests, and then add some of our own.

The Set Up

The easiest way to get up and running with TDD is to use the vue-cli tool. If you haven’t used it already, the vue-cli tool scaffolds a new Vue project for you from the command line.

When you use the vue-cli to scaffold a project, all you have to do is follow the prompts and then tests will automatically be set up for you. How easy is that? Let’s walk through the process so we can see exactly how to do it.

The first step is to install the vue-cli tool if you haven’t already. Using NPM, you can open up your terminal and run npm install -g vue-cli to install it.

Before we create our project, we need to pick a template. The vue-cli gives us a couple of different template options such as webpack, browserify, pwa, and simple. Each of them has their own unique setups, and I’ll leave it to you to choose the one that suits you best. Do note that the “simple” versions do not include testing. For this tutorial, I’m going to use the webpack template.

Now, navigate to the directory where you want to create your new Vue project. Here you can run vue init <template-name> <project-name> to scaffold your project. The vue-cli tool will now prompt you with a series of questions about your project, like this:

As you can see, I’ve accepted most of the default scaffolding settings, but I turned off vue-router because we won’t need it. What you pick is up to you, but make sure you enable unit tests!

read more