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

5 Great Talks From VueConf 2017, The First Vue.js Conference

5 Great Talks From VueConf 2017, The First Vue.js Conference

VueConf 2017, the first official Vue.js conference, took place over the last two days, June 22nd and 23rd.

The event was held in Wrocław (pronouned “vratslaw”, from what I can gather), which is a beautiful and historic city in the South-West of Poland. Around 300 people attended including many Polish locals, Europeans from surrounding countries like Germany and Hungary, and a number of adventerous developers from far away countries like the US, India and Australia (me).

The conference featured a keynote from Vue.js founder Evan You, and variety of interesting talks from Vue.js contributors, experts and advocates.

I think all attendees would agree that each and every talk of the conference was informative and inspirational, but in this article I’ll limit myself to just five talks to report on what you missed!

1. Evan You - The State of Vue 2017

VueConf 2017 kicked off at 9am with a keynote from Vue.js founder Evan You. His talk recapped the history of Vue, which began as a humble idea for a lightweight UI library way back in 2013. He told of how Vue gained unexpected attention on the front-page of Hacker News, and later a tweet from Laravel creator Taylor Otwell gave the project some serious traction.

read more

4 Ways To Boost Your Vue.js App With Webpack

4 Ways To Boost Your Vue.js App With Webpack

Webpack is an essential tool for developing Vue.js single page applications. It makes your development workflow much simpler by managing complex build steps and can optimise your apps size and performance.

In this article I’ll explain four ways that Webpack can enhance your Vue app, including:

  1. Single file components
  2. Optimising the Vue build
  3. Browser cache management
  4. Code splitting

What about vue-cli?

If you’re using a template to build your app from vue-cli, a pre-made Webpack config is provided. They’re well optimised and there are no improvements I can suggest!

But since they work so well out of the box, you probably don’t have much idea of what they’re really doing, right? Consider this article an overview of the Webpack config used in the vue-cli templates, as they include the same optimisations I’m discussing here.

1. Single file components

One of Vue’s idiosyncratic features is the use of HTML for component templates. These come with an intrinsic problem, though: either your HTML markup needs to be in an awkward JavaScript string, or your template and component definition will need to be in separate files, making them hard to work with.

Vue has an elegant solution called Single File Components (SFCs) that include the template, component definition and CSS all in one neat .vue file:

MyComponent.vue

<template>
  <div id="my-component">...</div>
</template>
<script>
  export default {...}
</script>
<style>
  #my-component {...}
</style>

read more

Extending VueJS Components

Extending VueJS Components

Do you have components in your Vue app that share similar options, or even template markup?

It’d be a good idea to create a base component with the common options and markup, and then extend the base component to create sub components. Such an architecture would help you apply the DRY principle in your code (Don’t Repeat Youself) which can make your code more readable and reduce the possibility of bugs.

Vue provides some functionality to help with component inheritance, but you’ll also have to add some of your own ingenuity.

Example: survey questions

Here is a simple survey made with Vue.js:

You’ll notice that each question has a different associated input type:

  1. Text input
  2. Select input
  3. Radio input

read more

Single Page App Backends: Where Laravel Beats Node.js

Single Page App Backends: Where Laravel Beats Node.js

I’ve been commissioned to write a book about building full stack Vue.js apps. Since many Laravel developers are interested in Vue (Vue now ships with Laravel), the publisher wants the book to focus on full stack Vue.js with Laravel.

In preparing for the book I knew I would have to answer a very important question for myself: why would anyone even want to use Laravel as backend for a single page app when they can use Node.js?

Node.js advantages

Like many web devs who learned to code in the last decade, I started out with PHP. But as I got interested in frontend development and SPAs (single page apps), I eventually made the switch to full stack JavaScript and I hadn’t really looked back since.

Node.js has some very clear advantages as an SPA backend:

  1. One language in the project (JavaScript) means it’s simply easier to code.
  2. There’s opportunity to share code between the frontend and backend apps or even make the app isomorphic.
  3. Node.js allows server-side rendering. This means you can render your page on the server before it hits the browser, allowing users to see the page quicker. (There are attempts to achieve this with PHP/JS extensions, but for the time being, these do not work with many SPA frameworks like Vue, and if they do, they’re much slower).
  4. Node has non-blocking I/O and is better at handling concurrent requests (PHP can do this now too, but again, slower).

Stuck with PHP

Given all of the above, my assumption for why you’d use PHP for a SPA backend is because you must be stuck with it, and Laravel is chosen because it’s simply the best of a bad situation.

You might be stuck with PHP if:

read more

Switching From React To Vue.js

Switching From React To Vue.js

So you’re a React developer and you’ve decided to try out Vue.js. Welcome to the party!

React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular’s influence on Vue.

I’ll focus on the differences in this article so you’re ready to jump into Vue and be productive straight away.

How much difference is there between React and Vue?

React and Vue have more similarities than differences:

  • Both are JavaScript libraries for creating UIs
  • Both are fast and lightweight
  • Both have a component-based architecture
  • Both use a virtual DOM
  • Both can be dropped into a single HTML file or be a module in a more sophisticated Webpack setup
  • Both have separate, but commonly used, router and state management libraries

The big differences are that Vue typically uses an HTML template file where as React is fully JavaScript. Vue also has mutable state and an automatic system for re-rendering called “reactivity”.

We’ll break it all down below.

Components

With Vue.js, components are declared with an API method .component which takes arguments for an id and a definition object. You’ll probably notice familiar aspects of Vue’s components, and not-so-familiar aspects:

read more