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

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

7 Vue.js Backends Compared

7 Vue.js Backends Compared

Which backend are you planning to use for your next Vue.js project?

Often developers choose what they’re familiar with. If you’re primarily a Laravel developer, for example, I’ll bet Laravel will be first to your mind when planning a new project.

It makes sense to work with what you already know and enjoy. That said, each backend has its own strengths and weaknesses, and certain project requirements may better match one more so than others.

Your best bet is to get familiar with what’s available so you can make a well-informed choice. In this article, we’ll investigate the suitability of some of the most popular backend options for Vue apps:

The de facto choice for a Vue.js backend is Express.js, a microframework for Node.js.

Before we consider Express specifically, let’s first consider the advantages of Node.js. Firstly, Node is written in JavaScript. This means you can share code between a Vue client and a server app. It also means you can use server-side rendering to generate your Vue app on the server and deliver it to the client fully rendered. Secondly, Node is really fast thanks to non-blocking I/O and its great ability to handle concurrent requests.

read more

5 Awesome Boilerplates/Templates For VueJS Projects

5 Awesome Boilerplates/Templates For VueJS Projects

Are you about to begin an important Vue project? To ensure you start with a solid foundation, you might use a template (aka boilerplate, skeleton, starter, or scaffold) rather than starting from npm init or vue init.

Many experienced developers have captured their wisdom about building high-quality Vue apps in the form of open source templates. These templates include optimal configuration and project structure, the best third-party tools, and other development best practices.

vue-starter Vue Starter for isomorphic PWAs with Vue

Unlike Vue CLI 3, which is optimized for flexibility, templates are opinionated. It’s important, therefore, to choose the one that fits with your development philosophy and has roughly the same features that you’ll need out of the box.

Some considerations for choosing a Vue template include:

  • Webpack
  • PWA
  • Full-stack with authentication
  • Good documentation
  • GraphQL
  • Testing

Etc.

There are many great Vue.js templates out there, but in this article, we’ll look at 5 that include key features that new projects will often require.

read more

Create A YouTube-style Recommendation Engine With Node & Vue

Create A YouTube-style Recommendation Engine With Node & Vue

One of the best ways to hook the users of your app is to show them personalized content. A good example is YouTube’s video suggestions based on previously watched videos. Another popular one is Amazon’s suggestion to view similar items based on previously viewed products. Another example is Instagram’s method of choosing which images and videos to show when you search or explore.

What You Will Learn

In this article, we’ll walk you through the steps of building a simple application that suggests personalized videos to a user based on videos the user has recently uploaded: the user uploads videos and in return gets a feed of related videos. To do this, we are going to take advantage of Cloudinary’s video player and their Automatic Video Tagging Add-on, powered by Google.

Your finished app will look something like this:

Final Screenshot

Dependencies

To build this app, we are going to use a Node server for the backend and Vue for our front-end. To perform this tutorial yourself, verify that:

  • Node is installed on your machine
  • Node Package Manager (npm) is installed on your machine.

read more

Is My Single-Page Application SEO Friendly?

Is My Single-Page Application SEO Friendly?

A notoriously murky area of single-page application (SPA) development is SEO. Depending on who you ask, search engine crawling of client-rendered content is either totally fine, fine as long as it’s synchronous or not at all fine.

Due to the confusion caused by all this conflicting advice, I regularly see the question “is my Vue SPA okay for SEO?” come up in places like the Vue.js Developers Facebook group, the Vue.js Forums and r/vuejs on Reddit.

In this article, we’ll challenge the popular opinions, do doing some basic tests and try to conclude with some sensible advice for building SEO-friendly SPAs.

The issue with client-rendered content

The standard implementation of a single-page app provides a page “shell” to the browser without any meaningful content included. The content is instead loaded on demand from the server with AJAX and then added to the page by JavaScript.

This allows a user to view the “pages” of an SPA site without a page refresh, theoretically improving UX.

SPA content loading model

read more