As we continue to build this HackerNews clone up, the code within some of our components is going to increasingly grow. We need to start splitting our application up into multiple smaller components and in order for us to do this, we’ll first have to learn some new concepts such as passing data into components using props.
In this tutorial, we are going to create an
Item.vue component that will render a single item within our
Homepage.vue component. The finished product of this will look like this:
Note: We will be stealing a lot of the design elements from the official HackerNews project: vue-hackernews-2.0
The first thing we will need to do is to define our
Item.vue component. This will take in a story and will render it for us using the
css that we will define in the
Notice that we’ve used
props within our component’s
js. This will allow us to pass in a
story object further down the line from a parent component such as our
Now that we have created this new component, we can go about updating our
Homepage.vue component so that it uses our newly defined
Updating our Homepage.vue
Let us first modify our
<template> tags so that we utilize our new
Item.vue component. We’ll still want to reuse the
v-for VueJS directive in order to render an array of top items.
:story to bind an individual
story object to each of our
This looks a lot more succinct and is positively far better than just having our
Homepage.vue component constantly grow on us.
Now that we’ve done this, we need to import our
Item component and register it within our
Homepage component. We can do this like so:
Nothing else within our
Homepage.vue component needs to change. If you save all of the changes you have just made then you should see your application rendering nicely in the browser.
Why Break Up Our Application?
So at this point, I think it’s worthwhile covering why we have just made a smaller
Item.vue component instead of just pushing all our code into one component. By doing this, we effectively enable ourselves to reuse various parts of our codebase in different places. It also helps to break up a massive application into a series of smaller, easier to debug, digest and expand upon.
Let’s see a perfect example of this now. Create a new component called
New.vue, this is going to show off all of the newest articles available courtesy of the HackerNews API.
<template> tags I want you to add the following:
You may notice that this is identical to the code we currently have in our
Homepage.vue component and you would be 100% right. We now want to update our
<script> element to look like this:
Again, this should look identical to our
Homepage.vue component, except for the fact that we are hitting the
https://hacker=news.firebaseio.com/v0/newstories.json API endpoint as opposed to the
Adding a ‘New’ Route
We need a new route to render our
New.vue component, so fire open your
/src/router/index.js and update it to have a route that maps to our
New component like so:
Updating our Navbar.vue
Finally, let’s update our
Navbar.vue component so that we have a link to not only our
Homepage, but also to
/new so that we can decide when we want to view new stories or top stories:
So, in this tutorial, we looked at how we could further break up our growing application into more components and start passing information from a parent component, our
Homepage.vue component, to individual
We’ve covered some of the main benefits of breaking down a large, growing application into a series of smaller components. We also looked at how we could pass information between both a parent component and a series of child components using
In the next tutorial, we are going to look at how we can manage state within our VueJS application using Vuex and improve the performance of our application by caching API results. You can see the next tutorial here: Part 7 - Managing State with Vuex