In this project series we are going to be building a simplistic version of [HackerNews](https://hackernoon.com/tagged/hackernews) in [VueJS](https://hackernoon.com/tagged/vuejs) from scratch. This will hopefully cover some of the key topics you will need to become familiar with if you wish to develop your own applications using the framework.

After playing a lot with VueJS over the past few months and I’m a huge fan of the framework. Thus, I thought it would be the perfect candidate to base the first ever project series for TutorialEdge on. I hope you enjoy this and find it worthwhile!

Throughout this project we will be integrating with the [HackerNews API](https://github.com/HackerNews/API) so that we can focus on the frontend JavaScript code and not have to worry about implementing the backend.

### Video Tutorial

![](https://i.ytimg.com/vi/AdGsg8kBVkM/hqdefault.jpg)

The goal of this project is to show you everything it takes to build a complete, fully functioning frontend application using the VueJS framework. We’ll walk through everything from setting up your project, to hitting a few APIs in order to retrieve any articles and rendering these nicely on our site!

We’ll cover the following topics:

*   Setting up a VueJS project using the vue-cli
*   Creating your first component
*   An introduction to routing in your Single Page Application
*   Hitting API endpoints in your components
*   Dynamic routing in a Single Page Application

If you wish for me to extend this or feel I should expand upon anything then please let me know by tweeting me: [@Elliot\_F](https://twitter.com/elliot_f)

### Github Source Code!

> The full source code for this project can be found here: [elliotforbes/hackernews-vuejs](https://github.com/elliotforbes/hackernews-vuejs)

Feel free to steal this and use this for your own personal gain, but if you do end up making a million off it, I expect at least a beer if you ever stumble across me in the wild!

### The Finished Product!

After following this series through to completion, you should hopefully have a finished product that will look a little something like this:

![](https://hackernoon.com/hn-images/0*_Fy_vbdc_hHGKToR.png)

Nothing too fancy I am sure you will agree, but a very decent starting point that developers new to the framework can extend and make their own!

> _Check out the next tutorial in this series here:_ [_Part 1 — Setting Up Your Development Environment_](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-1-setting-up-vuejs-project/)

### Tutorials

![](https://hackernoon.com/hn-images/0*5CzcRjHNjI3fOiWD.png)

[Part 1 — Setting Up Our VueJS Project 3 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-1-setting-up-vuejs-project/)

[In this tutorial, we are going to be setting up our basic project that will form the base of our HackerNews clone](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-1-setting-up-vuejs-project/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-1-setting-up-vuejs-project/)

![](https://hackernoon.com/hn-images/0*CdIYzA0U2FXmMH4v.png)

[Part 2 — Creating a Few Components 5 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-2-creating-few-components/)

[In this tutorial, we are going to be creating a few components to our HackerNews clone and fleshing out our project.](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-2-creating-few-components/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-2-creating-few-components/)

![](https://hackernoon.com/hn-images/0*c0umtzQjTLXnHU3b.png)

[Part 3 — Adding a Few Routes To Our App 4 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-3-adding-a-few-routes/)

[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.](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-3-adding-a-few-routes/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-3-adding-a-few-routes/)

![](https://hackernoon.com/hn-images/0*hPtqdKzolJDMw7Gz.png)

[Part 4 — Hitting The HackerNews API 5 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-4-hitting-an-api/)

[In this tutorial, we are going to start hitting some APIs and showing some of the top stories on our HackerNews clone.](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-4-hitting-an-api/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-4-hitting-an-api/)

![](https://hackernoon.com/hn-images/0*_5ee9RmjgVO87OUg.png)

[Part 5 — Viewing Individual News Articles 6 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-5-single-news-article-view/)

[In this tutorial, we are going to add some more routes and components to our application to view individual news items and the comments](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-5-single-news-article-view/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-5-single-news-article-view/)

![](https://hackernoon.com/hn-images/0*FkwUkiAlzYTxfNZ2.png)

[Part 6 — Advanced Components 5 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-6-advanced-components/)

[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.](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-6-advanced-components/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-6-advanced-components/)

![](https://hackernoon.com/hn-images/0*t9DGLDwBsTcSx0I2.png)

[Part 7 — Managing State with Vuex in your VueJS Applications 7 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-7-managing-state-with-vuex-vuejs/)

[In this tutorial, we are going to look at how you can manage state within your VueJS applications using vuex](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-7-managing-state-with-vuex-vuejs/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/part-7-managing-state-with-vuex-vuejs/)

![](https://hackernoon.com/hn-images/0*6p2se6_LXo_EIazP.png)

[2 Minutes](https://tutorialedge.net/projects/hacker-news-clone-vuejs/)

[In this series we look at how you can build your own HackerNews clone using Vue.JS](https://tutorialedge.net/projects/hacker-news-clone-vuejs/)

[Published: Monday, Mar 19, 2018](https://tutorialedge.net/projects/hacker-news-clone-vuejs/)

_Originally published at_ [_tutorialedge.net_](https://tutorialedge.net/projects/hacker-news-clone-vuejs/)_._

Building a HackerNews Clone in VueJS

Too Long; Didn't Read

Company Mentioned

@elliot_f

RELATED STORIES