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

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

How To Publish Your Vue.js Component On NPM

How To Publish Your Vue.js Component On NPM

You’ve made an awesome component with Vue.js that you think other developers could use in their projects. How can you share it with them?

In this article I’ll show you how to prepare your component so that it can be packaged and published on NPM. I’ll use an example project and demonstrate the following:

  • Ensuring dependencies are not included in the package
  • Using Webpack to create separate builds for the browser and Node
  • Creating a plugin for the browser
  • Important configuration of package.json
  • Publishing on NPM

Case study project: Vue Clock

I’ve created this simple clock component which I’m going to publish on NPM. Maybe it’s not the coolest component you’ve ever seen, but it’s good enough for demonstration.

Vue Clock Demo

Here’s the component file. There’s nothing too special here, but note that I’m importing the moment library in order to format the time. It’s important to exclude dependencies from your package, which we’ll look at shortly.

Clock.vue

<template>
  <div></div>
</template>
<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        time: Date.now()
      }
    },
    computed: {
      display() {
        return moment(this.time).format("HH:mm:ss");
      }
    },
    created() {
      setInterval(() => {
        this.time = Date.now();
      }, 1000);
    }
  }
</script>

read more

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS

“Eliminate render-blocking JavaScript and CSS”. It’s the one Google Page Speed Insights suggestion that I always get stuck with.

When a web page is accessed, Google wants it to only load what’s useful for the initial view, and use idle time to load anything else. That way, the user can see the page as early as possible.

There are many things we can do to minimize render-blocking JavaScript e.g. code splitting, tree shaking, caching and so on.

But what about CSS? For this, we can minimize render-blocking by isolating the CSS needed for above-the-fold content (a.k.a. the critical CSS) and loading that first. We can then load the non-critical CSS afterwards.

Isolating critical CSS is something that can be done programmatically, and in this article I’ll show you how to delegate it to your Webpack pipeline.

What does render-blocking mean?

If a resource is “render-blocking”, it means the browser can’t display the page until the resource is downloaded or otherwise dealt with.

Typically, we will load our CSS in a render-blocking way by linking to our stylesheet in the head of the document, like this:

<head>
  <link rel="stylesheet" href="/style.css">
  ...
</head>
<body>
  <p>I can't be seen until style.css has been loaded!</p>
</body>

When this page is loaded by a web browser, it will read it from top to bottom. When the browser gets to the link tag, it will start downloading the stylesheet straight away, and will not render the page until it’s finished.

read more

4 Important Changes In Vue.js 2.4.0

4 Important Changes In Vue.js 2.4.0

Vue.js 2.4.0 has been released this week with an abundance of new features, fixes and optimisations.

In this article, I’ll give you a breakdown of four new features that I think are the most interesting:

  1. Server-side rendering async components
  2. Inheriting attributes in wrapper components
  3. Async component support For Webpack 3
  4. Preserving HTML comments in components

1. Server-Side Rendering Async Components

Before Vue 2.4.0, async components were not able to be server rendered; they were just ignored in the SSR output and left to the client to generate. This gave async components a significant downside, and fixing the issue allows for much better PWAs with Vue.

Async Components

Async components are really handy. If you’ve been following this blog I’ve been writing about them a lot lately. In a nutshell, they allow you to code-split your app so non-essential components (modals, tabs, below-the-fold content, other pages etc) can load after the initial page load, thus allowing a user to see the main page content quicker.

Let’s say you decided to load below-the-fold content asynchronously. Your main component might look like this:

<template>
  <div id="app">
    <!--Above-the-fold-->
    <sync-component></sync-component>

    <!--Below-the-fold-->
    <async-component></async-component>
  </div>
</template>
<script>

import SyncComponent from './SyncComponent.vue';
const AsyncComponent = import('./AsyncComponent.vue');

export default {
  components: {
    SyncComponent,
    AsyncComponent
  }
}
</script>

read more

3 Code Splitting Patterns For VueJS and Webpack

3 Code Splitting Patterns For VueJS and Webpack

Code splitting a single page app is a great way to improve its initial loading speed. Since a user doesn’t have to download all the code in one hit, they’ll be able to see and interact with the page sooner. This will improve UX, especially on mobile, and it’s a win for SEO, as Google penalises slow loading sites.

Last week I wrote about how to code split a Vue.js app with Webpack. Long story short, anything you wrap in a single file component can easily be code split, as Webpack can create a split point when it imports a module, and Vue is happy to load a component asynchronously.

I believe the hardest part of code splitting is not getting it to work, but knowing where and when to do it. I’d go as far as to say that code splitting needs to be an architectural consideration when designing your app.

In this article I’ll present three patterns for code splitting a Vue.js single page app:

  • By page
  • By page fold
  • By condition

1. By Page

Splitting your code by page is an obvious place to start. Take this simple app, which has three pages:

read more