In the previous tutorial of this series, we covered single page components and how you could build your own components and subsequently render them within your Vue.js application. We created a simple Navbar component and registered it within our App.vue component and subsequently rendered it within our application.

In this tutorial, we are going to be creating a few more single-page components and setting up a vue-router so that we can navigate between different views on our site. This will enable us to view the Top Stories on our / path, we’ll then be expanding upon these routes as we progress through the rest of this series and start adding more components.

Video Tutorial

This tutorial is available in a video format, should you wish to support the series then you can by subscribing to my channel and liking the video!

Our HomePage Component

First thing we are going to need is a component that will show all of the most popular news stories currently on the real HackerNews site. Don’t worry about where these posts are coming from just yet, we’ll be solving that issue in the next tutorial when we start hitting the HackerNews API.

<template>
    <div>
        <h2>Homepage</h2>
    </div>
</template>

<script>
export default {
  name: 'Homepage'
}
</script>

<style scoped>

</style>

Setting Up Our Vue Router

Thankfully, the vue-cli did most of the heavy lifting for us when it came to setting up the router within our application.

Open up the src/router/index.js and you should see the following code already pre-populated:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

Let’s disect what we have done here, so on the first and second lines, we have imported both Vue and the vue-router. Below this, we then import all of the components we wish to render on their own paths, in this case, it’s only our HelloWorld component.

Finally, we tell our Vue application to use the vue-router before then creating a new Router which contains all of ours applications routes.

Each of our routes is a combination of a path, the name of our path, and the component we wish to render when we hit this path. Should we wish, we can also do cool stuff such as dynamic route matching which we will cover in more detail in part 5 of this project.

For more information our VueJS routing check out the official documentation or my tutorial: VueJS Routing Tutorial

Modifying Our Routes

Let’s modify the routes slightly so that we are pointing the / path to our newly defined Homepage.vue single-page component.

import Vue from 'vue'
import Router from 'vue-router'
import Homepage from '@/components/Homepage'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homepage',
      component: Homepage
    }
  ]
})

When we navigate back our browser and view http://localhost:8080/#/, you should now see our Homepage <h2>Homepage</h2> being rendered in all its glory.

Our updated view

Registering your Vue Router

One key thing to note if you are setting up the vue router from scratch is that once you have created your src/router/index.js file and populated it with your JavaScript code, you will subsequently have to register this within your Vue.js application. You can do this by modifying your src/main.js file so that it first imports our src/router/index.js file and then registers it within our root Vue instance like so:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

Conclusion

In this tutorial, we managed to create a few more components within our Vue.js application and set up the vue router which enables us to navigate between different components with ease. Currently, this only renders the one route, but in the next couple of tutorials, we will be using this to dynamically render our components depending on the user’s location within our application.

In the next tutorial, we are going to look at how we can extend this Homepage.vue component so that it starts hitting the HackerNews API and starts to retrieve all of the Top Stories currently trending on the site. You can find that tutorial here: Part 4 - Hitting an API


Tutorials


Part 3 - Adding a Few Routes To Our App Logo
Part 1 - Setting Up Our VueJS Project
3 Minutes

In this tutorial, we are going to be setting up our basic project that will form the base of our HackerNews clone

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 2 - Creating a Few Components
5 Minutes

In this tutorial, we are going to be creating a few components to our HackerNews clone and fleshing out our project.

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 3 - Adding a Few Routes To Our App
4 Minutes

In this tutorial, we are going to setting up our application to use the vue router and add a few simple routes to our application.

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 4 - Hitting The HackerNews API
5 Minutes

In this tutorial, we are going to start hitting some APIs and showing some of the top stories on our HackerNews clone.

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 5 - Viewing Individual News Articles
6 Minutes

In this tutorial, we are going to add some more routes and components to our application to view individual news items and the comments

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 6 - Advanced Components
5 Minutes

In this tutorial, we are going to split out our application into more components and use some of the more advanced features such as props and transitions.

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Part 7 - Managing State with Vuex in your VueJS Applications
6 Minutes

In this tutorial, we are going to look at how you can manage state within your VueJS applications using vuex

Published: Monday, Mar 19, 2018
Part 3 - Adding a Few Routes To Our App Logo
Building a HackerNews Clone in VueJS
2 Minutes

In this series we look at how you can build your own HackerNews clone using Vue.JS

Published: Monday, Mar 19, 2018