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

7 Tips For Building A Large Nuxt App

7 Tips For Building A Large Nuxt App

Nuxt’s very opinionated when it comes to code structure. Its conventions can save you a lot of time making decisions. After one year using it on large codebases though, I’m glad there’s considerable wiggle room for customization. In this article, I lay out a few tips that have either simplified common code patterns or helped me better manage my large Nuxt codebases.

Bear in mind this article concerns Nuxt’s 1.4.x version. At the time of writing, work on a substantially revamped 2.0 version is already underway. Also, Nuxt is mostly known as a SSR toolkit, but it’s perfectly capable of building SPA apps as well. I like the fact that Nuxt offers a codebase organization standard for all Vue applications.

Use a custom routes index file

Nuxt’s latest release includes extendRoutes(), a way to add custom routes to Nuxt’s automatic route setup based on the pages/ directory. You can also bypass Nuxt’s setup entirely by using a routes index file. While you still need to use pages as the directory, you can add a index.js to it:

module.exports = [
   {
     name: 'my-route',
     path: '/my-route',
     component: 'src/pages/foobar.vue'
   }
]

In nuxt.config.js, use this as your extendRoutes():

extendRoutes (nuxtRoutes, resolve) {
  nuxtRoutes.splice(0, nuxtRoutes.length, ...routes.map((route) => {
    return { ...route, component: resolve(__dirname, route.component) }
  }))
}

Stateful loading components

read more

Make HTTP Requests to Remote Web Services in a NativeScript-Vue App

Make HTTP Requests to Remote Web Services in a NativeScript-Vue App

Many, not all, mobile applications act as a client for viewing remote data that might typically appear within a web application. The most common way to consume and transmit data is through HTTP requests that communicate to remote web services or RESTful APIs.

If you’ve been keeping up with my Vue.js content, you’ll remember I wrote a tutorial titled Consume Remote API Data via HTTP in a Vue.js Web Application. In that tutorial, the web browser acted as the client and we used axios and vue-resource to make HTTP requests.

In this tutorial, we’re going to see how to make HTTP requests within a NativeScript application built with the Vue.js JavaScript framework.

Remember, NativeScript will create native Android and iOS applications. However, the web method towards making HTTP requests, as demonstrated in my previous tutorial, will still work. That said, we’re going to look at the NativeScript way to do business and revisit the alternatives.

read more

How To Build Vue Components That Play Nice

How To Build Vue Components That Play Nice

Very few people write Vue components originally intending them to be open-sourced. Most of us start out writing components for ourselves - we have a problem, and then decide to solve it by building a component. Sometimes we find ourselves wanting to solve the same problem in new locations in our codebase, and so we take our component and refactor it a bit to make it reusable. Then we want to use it in a different project, and so we move it out into an independent package. And then we think “hey, why not share this with the world?”, and so we open-source the component.

On the one hand, this is great, it means a large and growing availability of open-source components out there for anyone working in Vue (a search for “vue” on npmjs.com turns up over 12000 packages).

On the other hand, because most of these components evolved from a specific situation, and not all of us have experience designing components for reuse across many environments, many of these components do not “play nice” with the Vue ecosystem.

What does it mean to “play nice”? At a high level, it means behaving in a way that feels natural to Vue developers, and that is easy to extend and integrate into any sort of application.

After exploring a wide range of open source components, here’s what I think goes into making a Vue component that plays nice:

  1. Implement v-model compatibility
  2. Be transparent to events
  3. Assign attributes to the right elements
  4. Embrace browser norms for keyboard navigation
  5. Use events preferentially over callbacks
  6. Limit in-component styles

read more

Speed Up Development With Prototyping and Vue

Speed Up Development With Prototyping and Vue

Have you ever worked on a project that got away from you? It’s easy to start with a project, only to find yourself overwhelmed with new skills and challenges. Prototypes help keep projects small, and help developers decide if they’re worth pursuing. Furthermore, we can leverage the flexibility of Vue to build prototypes, so we can iterate on ideas quickly.

Product vs. Prototype

A product is what a user sees, like an app, a service, or a device. A prototype resembles the product, but is meant to experiment with a particular feature of the product at a low cost.

As web developers, we often make the product before the prototype. If you’ve ever had a weekend project turn into a month-long effort, consider taking the prototyping approach. Prototypes have some useful benefits:

  • You can make a prototype in an hour, as opposed to a day
  • Prototypes are not production-focused, so you don’t need a production environment (testing, deploying, etc.)
  • You can prototype one feature at a time, to see how it fits into your product (and if it’s worth implementing)
  • If you’d like to try out some new technology, you can use a prototype to explore it, instead of experimenting in a production environment

Products take more time to make, requiring research and testing. On the other hand, prototypes require less time and fewer resources. We’ll explore how to make a prototype instead of a product with modern web tools including Vue.js.

An Example

Suppose we want to make an app that tells a user when the sun will rise and set at a given location. Furthermore, we’d like to display a visual that shows what time in the day the sun rises/sets.

Goal: Make an app that shows the times that the sun will rise and set at a given location. The times should be shown in a data visualization.

Throughout this example, we’ll identify minimum viable solutions for our prototype. These minimum viable solutions come when we have to make a decision about what we’re building. We’ll choose an option more appropriate for building a prototype, instead of a product.

This is what the final product will look like:

read more

Create & Publish Web Components With Vue CLI 3

Create & Publish Web Components With Vue CLI 3

Are web components “the future” for the web platform? There are many opinions both for and against. What is a fact, though, is that browser support is emerging for web components and there are a growing number of tools and resources for authors interested in creating and publishing web components of their own.

Are web components the future?

A great tool for creating web components is Vue.js, and it’s been made even easier with the release of Vue CLI 3 and the new @vue/web-component-wrapper library.

In this article, I’ll discuss the reasons why you might want to create web components and show you how you make your first one with nothing more than a basic knowledge of Vue.

What are web components?

You’re familiar, of course, with HTML elements like divs, spans, tables etc. Web components are custom HTML elements that can be used and reused in web apps and web pages.

For example, you might create a custom element called video-player so you can provide a reusable video interface that has UI features beyond what’s available with the standard HTML 5 video element. This element could provide an attribute “src” for the video file and events like “play”, “pause” etc, to allow a consumer to programmatically control it:

<div>
  <video-player src="..." onpause="..."></video-player>
</div>

read more