Vue.js Developers

Looking to hire a Vue.js expert?

If you're looking for a freelance or remote Vue developer, join our brand new Vue.js Freelance and Remote Jobs Facebook group. This group is moderated for quality and is completely free to use.

If you're a developer looking for work, feel free to request membership.

Join Here

Latest Blog Posts

End-To-End Testing A VueJS HackerNews Clone

End-To-End Testing A VueJS HackerNews Clone

In this blog post I will show how to test a HackerNews clone without pulling out hair.

There is an elegant and fast Vue.js 2 HackerNews clone made by the framework’s author himself: vuejs/vue-hackernews-2.0 with live demo hosted at https://vue-hn.now.sh/. The clone has all the bells and whistles one can expect from a modern progressive application: includes server-side rendering, inlined CSS, routing, single file components, etc. There is only one thing the code is missing - tests! Hmm.

HackerNews with Vue

What would it take to quickly confirm that this project is working? Would you need to jump through hoops if you wanted to add tests? Would you write unit tests or would end-to-end tests be better? Would the tests work in a modern browser or using JavaScript DOM emulation? Would the entire experience be full of pain and misery?

I will show you can quickly write lots of end-to-end tests without any pain. These tests are most important ones - because they ensure that the deployed application is actually usable by the end user. My tool of choice is Cypress - our open source free test runner.

Setup

I start testing by forking the repository and getting a local copy.

git clone git@github.com:bahmutov/vue-hackernews-2.0.git
cd vue-hackernews-2.0
npm install

read more

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