Reusable Vue.js Components Part 1: Introduction

Welcome to our series on building custom components in Vue.js 2.0. As part of our internal development with Vue.js we have learned some good lessons about building custom code in a non-trivial Vue.js application. This series will share some of those lessons.

Approach

Vue.js provides a wonderful facility for creating rich custom components. Just look at vue-awesome for a sampling of community-created widgets and controls.

However, when building a new application you don’t necessarily want to commit to a given third party implementation. It is often better to build simpler controls and enhance them over time as the application comes together.

When we were building our internal tools for Teamwork, one of the reports needed to provide a filter allowing the user to select a project from the list of available projects. We anticipated upwards of 100 projects active at any time so eventually supporting autocomplete was important.

However, our application didn’t have a way to fetch available projects from Teamwork or perform filtering logic based on that. There was core infrastructure work we had to do before spending time on enhanced UI behavior.

We had to develop an approach which allowed us to progressively enhance our controls. This allowed us to transition from a simple dropdown selection to a fully-functional autocomplete without having to change our application architecture. We kept the filter control’s UI logic separate from the report’s behavior.

This series will show how to do the same thing by building an auto-complete dropdown from scratch. We will then use those same principles to build a complex date-range picker control.

Audience

This post series is intended for anyone with a basic familiarity with Vue.js who wants to go further with building custom components in a re-usable way.

If this is your fist time working with Vue.js you should go through some basic tutorials first and come back here when you are ready.

Template

You can download a Vue.js application which includes the example code we will be working with in this series.

We are using the Webpack template provided by vue-cli. If you want to follow along, create a new project then add an empty Filters.vue component and load it in the existing App.vue.

Project structure

App.vue

Filters.vue

Styles

We will be adding some basic CSS to our examples as we go along. However, the main focus will be on functionality.