In the previous tutorial, we looked at how we could show all of the latest HackerNews stories on our
Homepage component and showed information like the score and the URL of that story. Whilst this is pretty cool, it doesn’t let us see the discussion going on around any of the stories, as we all know, this can be the best bit!
In this tutorial, we’ll be adding a new route to our VueJS application which will be able to render an individual story and the comments associated with it.
This tutorial is also available in video format, should you wish to support the series then you can do so by subscribing to my YouTube channel and hitting that like button on my videos!
Our Single.vue Component
First things first, we will need a new component. Create a new file within your
src/components directory called
Next, we will need to create a new route in our
vue router. Extend your
index.js file within the
src/router/ directory so that it imports our newly defined
Single component and so that it has a new
/story path which will render our component.
You should notice that the
path that we’ve set for our
Single component features a
:id at the end of it. This will represent the
id of the story that we wish to view and it prevents us from having to hardcode say
/story/1/ in order to view story 1 and so on.
Single component we will be able to retrieve this
:id value and then make the appropriate REST API request to fetch that stories’ comments and render them accordingly.
Updating our Homepage Component
So, now that we’ve defined this route, we need to update our
Homepage component so that each story we retrieve links back to the appropriate
/story/:id page within our application.
To do this, we’ll use the
<router-link/> component to wrap our stories’ title like so:
<router-link> component effectively allows you to change your location within this Single Page Application without making a request for a new page. It effectively tells Vue that it want’s to change location, Vue picks this up and matches the location against an existing route, and then displays the appropriate component assigned to that route.
You could in theory do this with
<a> tags, however,
<router-link> provides a few more advanced features such as the ability to update the underlying web browser’s history via API requests should we wish!
When you save this and navigate to your application in the browser, you should see all of our storie’s titles rendering as HTML links.
When you subsequently click on a link, you should see it take you through to our newly defined
Single component with the
ID appended to the end of our URL like so:
Querying The Comments API
So, we have the story, we have our new component, how do we get our new component to retrieve all of the top-level comments for said story?
The answer? Another series of RESTful API calls within our component’s
created() lifecycle hook.
Updating our Template
Now that we’ve queried the appropriate API endpoints to retrieve the top level comments, it’s time to display these in our
Single.vue component. In order to do this we are going to add the following HTML:
If you were to save this and view it as it currently stands, it wouldn’t look all that good. So, let’s add some CSS to make things look a little nicer all around. Add the following CSS to the
<style scoped> part of your
These were taken from this codepen: Comments! I can’t take credit for making it look nice!
Some Global Style Changes
To polish this just a little bit more, let’s add a
static/style.css file to our project and populate it with the following CSS:
The Finished Product
Once you have made the above changes, you should see something like this render out into your browser:
This project is starting to look a little more polished, a little closer to being finished. However, there is still a lot to be improved upon. For instance, the way we are rendering that text isn’t right, neither is the date format. And we can’t see any child comments underneath the top comments listed.
If you are enjoying the course so far then I would love to hear your feedback on twitter: @Elliot_f. I’m also open to any constructive critiques you may have with regards to not only this project, but anything about this site!
The next tutorial in this series can be found here: Part 6 - Advanced Components