In the last part we set up our webpack with babel and our boilerplate. In this part, we’ll use that webpack setup to start building our Single-Page application with vue-router and vuex. To start putting our routing together we’ll need to define a few components to separate out our application logic. Create a folder in your source directory called components and an admin folder inside of that. Now create a Home.vue component in the components root and the admin folder. Inside of these vue files is where we’ll build our Todo app with admin controls. Here’s some boilerplate to start with:

So now that we have some components to route to we can set up the router in our index.js file. To setup the router we have to:

  1. Import the Vue router.
  2. Create an instance of the Vue router object.
  3. Add some routes and map them to components.
  4. Register the router with our root Vue instance.

Finally, we have to use a router view element in our App.vue file:

Putting the router-view in the root App.vue file renders our entire app structure to the browser and allows us to send users to different components by appending a /$route to our url. Awesome! Now we can start building some basic Todo functionality. To do this we’ll set up a data property in our home component, add a few html elements, and add an addition method to add new Todos.

Now let’s add an admin panel with options to style the todos as we add them! We’ll add a toggle for strikethrough, zebra striping, and a “salty developer” mode to overwrite our todos completely with a random message.

The final result looks like this:

This sets up a toggle switch object that we can use to control the main todo component. Normally we could pass global state to the router as a property, but our root instance doesn’t have the data we need. This also wouldn’t solve the problem of our todos being reset each time we navigate to a different route. So, to accomplish this we’ll add Vuex, some router-links, and a global store for our instances to store data. To do this we’ll create an object called store inside of a new file called store which we will store in a folder called store. The final store file looks like this:

After we’ve defined the state we can import it into our index.js file.

I also changed the router mode to history so we don’t have that hashtag hanging around in the address bar.

The Vuex instance is sort of unique to the rest of our Vue instances, but it shares similar concepts. There are still reserved properties, but instead of data, computed, methods, etc. we have state, getters, and mutations. The state is the global state store for your single page application. This is usually where results from REST API requests will be stored in a traditional SPA. The mutations section is where rest requests get made and stored in the state property, and all changes to state should happen through a mutation. This ensures consistency of operation on state across your application. Finally, we have the getters property which allows us to retrieve state in a consistent manner across the application.

Now that we have the state extracted we just need to wire up the new state to the old components:

And here you can see what it looks like when you turn on all three modes:

Next up we’ll add child routes to allow for editing of todos. Stay tuned!