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 Most-Requested Features For Vue.js in 2018

5 Most-Requested Features For Vue.js in 2018

Vue is famed for its ease of use and simplicity. It achieves these qualities, in part, by having a focused and small API without too many extraneous features.

That said, users and maintainers are always thinking about potentially useful new features. This article discusses five of the most requested features from Vue’s GitHub issue board.

  1. Support for iterable protocol with v-for
  2. Multi-root templates (fragments)
  3. Reactive refs
  4. Custom v-model modifiers
  5. Package for custom renderers

It’s good to be aware of these feature requests, as some will make their way into coming versions of Vue, while the ones that don’t may help you better understand the design of Vue.

1. Support for iterable protocol with v-for

What is it?

When you think of iteration, you’ll most likely think of arrays. ES2015 introduced the iterable protocol which, when implemented, allows for any kind of object to be iterated using for...of. ES2015 also introduced new iterable data types like Map and Set.

Currently, Vue’s v-for directive can iterate arrays and plain objects, but not other iterable objects or data types. If you’re using a Map, for example, and you want to iterate it with v-for, you’ll first have to convert it to an array or plain object.

Note: maps, sets, and other new iterable data types are not reactive, either.

Why do users want it?

Since iterable objects and data types are officially part of the JavaScript language now, it’s inevitable that applications will utilize them for the benefits they offer.

If Vue is used as the UI layer for such an application, these objects and data types either can’t be iterated in the template or will need to pass through transformation functions.

Will it be added?

Maybe. The issue has been closed on GitHub, as the maintainers weren’t convinced that iterable objects and data types would commonly be used for UI state. Also, making iterable objects and data types reactive would take considerable work.

However, Vue’s observation system is to be refactored in version 2.x-next, which would be the ideal time to implement this feature.

Read more on GitHub.

read more

Can A Vue Template Have Multiple Root Nodes (Fragments)?

Can A Vue Template Have Multiple Root Nodes (Fragments)?

If you try to create a Vue template without a root node, such as this:

<template>
  <div>Node 1</div>
  <div>Node 2</div>
</template>

You’ll get a compilation and/or runtime error, as templates must have a single root element.

Typically, you’ll fix this problem by adding a “wrapper” div as a parent. This wrapper element has no display purpose, it’s just there so your template complies with the single-root requirement.

<template>
  <div><!--I'm just here for wrapping purposes-->
    <div>Node 1</div>
    <div>Node 2</div>
  </div>
</template>

Having a wrapper like this is usually not a big deal, but there are scenarios where having a multi-root template is necessary. In this article, we’ll look at why this is and provide some possible workarounds to the limitation.

Rendering arrays

The are some situations where you may need your component to render an array of child nodes for inclusion in a parent component.

For example, some CSS features require a very particular hierarchy of elements to work correctly, like CSS grid or flex. Having a wrapper between the parent and children elements is not an option.

<template>
  <!--Flex won't work if there's a wrapper around the children-->
  <div style="display:flex">
    <FlexChildren/>
  </div>
</template>

There’s also the issue where adding a wrapper element to a component may result in invalid HTML being rendered. For example, if you’re building a table, a table row, <tr>, must only have table cells, <td>, for children.

<template>
  <table>
    <tr>
      <!--Having a div wrapper would make this invalid HTML-->
      <TableCells/>
    </tr>
  </table>
</template>

In short, the single-root requirement means the design pattern of a components that return child elements will not be possible in Vue.

read more

Comparing the React and Vue Ecosystems with a Real-World SPA

Comparing the React and Vue Ecosystems with a Real-World SPA

React vs Vue - a favorite talking point among developers. Many people pick a framework and stick to it, never really getting to know the library they left behind. That’s mainly due to time; the only way to really get to know the ins and outs of a system is to use it, struggle with it, grow with it.

It’s just not efficient to spread your focus thin across similar tools, but aren’t you curious? I was.

Online you’ll run into articles that attempt to compare a to-do app or the like built with Vue and React, but rarely is a project so simple. With real applications, we’re worried about routing, state management, plugin compatibility, etc.

My question was not what are the differences between the Vue and React core libraries, but rather, how does building a real-world app compare in these frameworks? Which ecosystem of tools provides a better development experience for me when I’m building an SPA?

The Apps

I’ve been using Vue for about two years and developing for about eight. When I first started with Vue I decided I would learn it “out in the open” by open-sourcing a simple notes app that had fuller features like user-authentication using JWT and full CRUD note actions. This was partnered with a backend node API built using Koa.

Even though I don’t really have a specific need to change frameworks, I figured it would be a good idea to learn React. So I remade my koa-vue-notes app in React and open-sourced it as well. I figured the experience would broaden my understanding of JavaScript at the very least, and perhaps I’d find a new favorite tool.

Here’s the homepage of the app. The top is React, the bottom is Vue:

App Homepages

read more

Simple Vue.js Form Validation with Vuelidate

Simple Vue.js Form Validation with Vuelidate

Thanks to Vue’s reactivity model, it’s really easy to roll your own form validations. This can be done with a simple method call on the form submit, or a computed property evaluating input data on each change.

Using your form validation can quickly become cumbersome and annoying, however, especially when the number of inputs in the form increase, or the form structure gets more complicated e.g. multi-step forms.

Thankfully, there are great validation plugins for Vue like Vuelidate. In this article, we’ll be looking at how Vuelidate can be used to simplify:

  • Validation
  • Multi-step form validation
  • Child component validation
  • Error messages

We’ll also see how the Vuelidate-error-extractor plugin can be used to simplify error message display per input, or as an error summary above or below the form.

Basic validation with Vuelidate

Vuelidate is data-model oriented, meaning validation rules are added to a validations object in the component definition, rather than being added directly to input elements in the DOM.

The structure must resemble that of the form object, but the number of validation rules can be dynamic and change depending on which fields need validation.

export default {
  name: "FormComponent",

  data() {
    return {
      form: {
        name: "",
        email: ""
      }
    };
  },

  validations: {
    form: {
      name: { required },
      email: { required, email }
    }
  }
  ...
};

Here’s a live example:

read more

Using React-Style Callback Props With Vue: Pros and Cons

Using React-Style Callback Props With Vue: Pros and Cons

A prop can take any form, from a simple string or number to a complex object. And even a Function.

This is exactly the idea behind Callback Props: a Function that gets passed as prop to a child component, so the child component can execute it whenever it wants (after a button is clicked, a form is submitted, an API request failed…).

Callback Props are the “React way” of passing actions from parent to children. They are functions defined by the parent that execute when something happens to the child component. They can also be used with Vue.js as a replacement for events.

There are several pros and cons to this approach. In this article, I will compare the two approaches and help you decide which is best for your projects.

Getting your head around Callback Props and event emitting

The first time you read the amazing Vue docs you are presented with a simple communication pattern between components:

Vue component communication pattern

  • A child component receives props from a parent component.
  • That same child component emits events so the parent can listen to them.

Here’s an example of using both a prop and an event in Vue to play with an input value:

read more