Lately I’ve found myself completely enthralled by javascript. Like any good enthusiast I’ve been looking at the different libraries, frameworks, patterns and practices trying to develop my own style and opinions.

Around the release of Vue 2.0, I took notice of the library. I did a few quick prototypes and was immediately impressed with how quick I was able to pick it up. Despite my initial impressions, I shelved the library. As a developer looking to make a technology switch, I felt like my time could be better spent on the more popular competitors.

Now that I’ve worked with those competing libraries I wanted to give Vue another look and see if it holds up to my initial impressions. To go one step further, I’ve decided to share the code I put together during my learning process.

The sample in this post will be fetching and display data from an api. To keep things simple, I’m going to use the spotify web api so I can skip the back end and focus on Vue.

This project is using vue-cli to initialize a webpack-simple template. I’ve also installed vuex for state management, the jsx plugin for vue and I’ll be writing my html templates with pug.

To start I know the app has one use case at the moment, search for artists by name. With that in mind, I think the best place to start is by building the vuex store which contains the state and how to manipulate it.

The first snippet defines the initial state of the application. The second defines how to mutate that state. It is important to note that mutations must be synchronous. Therefore, I am only mutating the state, the isBusy property, to reflect that an api call is happening. To do the actual asynchronous api call, we need an action.

In vuex, actions within your store accept context as the first parameter. The code above is using es6 destructuring to define which functions I want from the context object. The second parameter is my payload object which for now just has the name of the artist the user is searching for. Finally the commit functions are telling vuex which mutations I want done to the state.

The components will need a way to access properties on the state, that’s where these getters come in. Getters simply expose properties on the state to components. Now that I’ve covered all the pieces of the vuex store, let’s look at a component and how that component makes use of the store.

Here I’m using mapGetters from vuex to access the properties I want on the state. In the render function I’m displaying the search component and conditionally rendering a busy indicator or the list of artists. I like that Vue gives the option to use both jsx and html templates because I prefer certain tools for certain tasks. I’m not promoting that you use both or when to use each, I simply want to show that both can be used interchangeably. So with that here is the search component.

This is a simple component with one job, when the user clicks the search button, dispatch an action to the vuex store.

With this snippet you should have an idea of how this all comes together. When the search button is pressed, the search component dispatches an action to ask the store to fetch some data. Within that action, the app component is notified that something is being fetched and displays a busy indicator. Then once the api has returned with data, the app component removes the busy indicator and displays the list of artists.

Now all this was over-kill for such a simple app. However, this is meant to lay the ground work for a larger application. In future posts I’ll give users the option to search by album or song and I’ll also allow them to step into the search result. For instance if you select an artist I’ll show their albums and/or popular songs. Building this foundation will make growing the app much smoother.

Share your comments, criticism, and suggestions with me on twitter Frank A Wilkerson and check out my youtube for more developer content.