Vue.js Developers

Looking for a Vue.js expert?

We can connect you with highly skilled Vue developers to build your next web project or join your team remotely.

Skills we offer:

  • Single-page app development
  • Full-stack app development (Node or Laravel)
  • Frontend unit testing & E2E testing
  • Project consultancy

Get in touch to discuss your requirements!

Latest Blog Posts

Build a PDF Viewer with Vue.js and Cloudinary

Build a PDF Viewer with Vue.js and Cloudinary

Cloudinary offers an interesting feature: the ability to generate images from PDF files and pages. With Cloudinary, you can create thumbnail images of your documents for previewing purposes. It’s useful when you don’t want to grant user access to the content, but need to give them a sneak peek of what they’re missing if they haven’t downloaded the PDF yet.

In this blog, we will share a hands-on example for building such solutions using Cloudinary. Here are the tools you’ll need:

  • Cloudinary: end-to-end image and video management service
  • Vue: progressive JavaScript framework

Create a Vue Project

The best and easiest way to get started on a Vue project is via the command line tool. You can install it with npm using the following command:

npm install -g vue-cli

This installation exposes Vue commands to the CLI, which you could use to perform various tasks including creating a new Vue project. Here is the command that creates a new project:

vue init simple pdf-viewer

simple is the project template we prefer to use as our very simple example, while pdf-viewer is the name of the project we are creating.

This command creates a file, index.html with some simple markup. Feel free to empty this file and replace with the following:

  <title>Welcome to Vue</title>
  <link href="" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="/style.css">
  <script src=""></script>
  <div id="app">
    <div class="container">
      <h3 class="text-center" style="color:#fff">PDF Viewer</h3>
      <div class="row">
        <div class="col-md-6 col-md-offset-3" v-if="file">
          <img :src="preview" alt="" class="preview">
      <div class="row pages">
        <div class="col-md-4" v-for="page in pages">
          <img :src="page.url" alt="" class="img-responsive" @click="selectImage(">
      <div class="row upload" v-if="!file">
        <div class="col-md-offset-4 col-md-4">
          <button @click="openWidget()">Upload PDF</button>
  <script src="//" type="text/javascript"></script>
  <script src="/script.js"></script>

read more

4 AJAX Patterns For Vue.js Apps

4 AJAX Patterns For Vue.js Apps

If you ask two Vue.js developers “what’s the best way to use AJAX in an app?”, you’ll get three different opinions.

Vue doesn’t provide an official way of implementing AJAX, and there are a number of different design patterns that may be used effectively. Each comes with its own pros and cons, and should be judged based on the requirements. You may even use several, simultaneously!

In this article, I’ll show you four places you can implement AJAX in a Vue app:

  1. Root instance
  2. Components
  3. Vuex actions
  4. Route navigation guards

I’ll explain each approach, give an example, and cover the pros and cons as well.

1. Root instance

With this architecture, you issue all your AJAX requests from the root instance, and store all state there too. If any sub components need data, it will come down as props. If sub components need refreshed data, a custom event will be used to prompt the root instance to request it.


new Vue({
  data: {
    message: ''
  methods: {
    refreshMessage(resource) {
      this.$http.get('/message').then((response) {
        this.message =;

Vue.component('sub-component', {
  template: '<div>{{ message }}</div>',
  props: [ 'message' ]
  methods: {
    refreshMessage() {


  • Keeps all your AJAX logic and data in one place.
  • Keeps your components “dumb” so they can focus on presentation.

read more

Vue.js + Brunch: The Webpack Alternative You've Been Hungry For

Vue.js + Brunch: The Webpack Alternative You've Been Hungry For

Imagine if there was a build tool that you could use for Vue.js projects that compiled faster than Webpack, gave you a smaller bundle size and required only a few lines of configuration.

Brunch is that tool. In this article, I’ll show you how incredibly easy it is to set up a Vue.js + Brunch project, cover some of the pros and cons of Brunch, and serve up a few tasty brunch puns on the way.

To whet your appetite, take a look at this side-by-side comparison of a Webpack config and a Brunch config for the same, simple Vue.js project:

Webpack blues

Webpack is a crucial tool for building sophisticated, highly optimized web applications, and is encouraged by many influential web developers.

However, for newer developers, or those working on less ambitious projects, Webpack mostly occurs as a barrier. For Vue.js projects, users feel they must choose either to develop in a lo-fi ES5 environment without the cool features like single-file components, or, to develop in a highly sophisticated environment with as much time spent on build config as on app development.

Make room for Brunch

Brunch has been around since 2012, and while it is the default build tool for the Phoenix Elixir framework, it is still surprisingly obscure. That said, it has a dedicated group of users who love it for its core philosophy of “simplicity and speed”, something that Vue.js users may identify with.

Despite its obscurity, there are almost 80 community made plugins for most imaginable automations like transpiling, linting, optimizing etc. Brunch can do most of the things you’ll need in a Vue project too: wrap files as modules, concatenate them into a build file, compile Vue files, transpile JS and SASS and so on.

To be clear, Brunch is not as full-featured as Webpack and has certain limitations. For example, Brunch does not yet support dynamic imports, and it doesn’t process images and fonts.

read more

Migrating A VueJS App To Vuex

Migrating A VueJS App To Vuex

One of the difficult things about getting started with Vuex is that it is not so much a library as it is a design pattern. It follows that implementing Vuex is not so much about using an API, as it is about structuring your code to comply with the pattern. If you’re new to Vuex, this will be daunting.

In this article, I’ll demonstrate how to get started migrating Vuex into an existing Vue.js project. I’ll show you how to identify the parts of your app’s state that belong in Vuex, and those that don’t, how to refactor your component functions into mutations, actions and so on, and finally we’ll discuss the benefits accrued.

If you’re not sure why you should use Vuex, I recommend you read this post first WTF Is Vuex: A Beginner’s Guide to Vue’s Application Data Store.

Case study: Vue.js Cinema

As a case study, we’ll migrate a demonstration app I made called Vue.js Cinema to Vuex. It’s a single-file component-based Vue app that is a good enough candidate for Vuex as it has a significant amount of application state.

If you want to learn how to build Vue.js Cinema from scratch, it’s part of my Ultimate Vue.js Developers course.

Remember that Vuex’s purpose is to manage application state. It follows that in order to migrate Vue.js Cinema to Vuex, we must identify its state. We’ll see the state in the code shortly, but it’s helpful to first infer it by simply observing what the app does i.e. it displays a list of movies and session times that can be filtered by changing the day, or toggling time and genre filters.

What state belongs in Vuex?

By using Vue Devtools, or just inspecting the code, we can see the data of the instance and each component:

Our objective is not to move all data to the Vuex store. Instead, we want to target data which:

read more

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

Avoid This Common Anti-Pattern In Full-Stack Vue/Laravel Apps

If you want your Vue.js single-page app to communicate with a Laravel backend, you will, quite reasonably, think of using AJAX. Indeed, Laravel comes with the Axios library loaded in by default.

However, it’s not advisable to use AJAX to retrieve application state on the initial page load, as it requires an extra round-trip to the server that will delay your Vue app from rendering.

I see many full-stack Vue/Laravel apps architected in this way. An alternative to this anti-pattern is to inject initial application state into the head of the HTML page so it’s available to the app as soon as it’s needed. AJAX can then be used more appropriately for subsequent data fetches.

Using this approach can get messy, though, if your app has different routes requiring different initial state. In this article, I’ll demonstrate a design pattern that makes it very simple to implement this injection approach, and allows for a lot of flexibility even in multi-route apps.

As you’ll shortly see, an example app I created is interactive 25% sooner when implementing this design pattern.

Passing Data To Vue From Laravel

Here’s an example full-stack Vue/Laravel app I built for Oldtime Cars, a fictitious vintage car retailer. The app has a front page, which shows available cars, and a generic detail page, which shows the specifics of a particular model.

This app uses Vue Router to handle page navigation. Each page needs data from the backend (e.g. the name of the car model, the price etc), so a mechanism for sending it between Vue and Laravel is required. The standard design pattern is to setup API endpoints for each page in Laravel, then use Vue Router’s beforeRouteEnter hook to asynchronously load the data via AJAX before the page transitions.

The problem with such an architecture is that it gives us this sub-optimal loading process for the initial page load:

Eliminating the AJAX request here would make the page interactive much sooner, especially on slow internet connections.

read more