I’ve been using Vue.js for a while now, and recently thought it’s time I learned Vue 2.x. So, I decided to create a simple Reddit component—one that can display recent posts from any subreddit—using Vue 2.1. Why? Well, what better way to learn a framework than to create something interesting with it. In this tutorial, I’ve documented the steps that I took to create it.
To be able to follow this step-by-step tutorial, you’ll need:
Vue has a very handy CLI you can use to quickly set up a new project with all the right dependencies. Here’s how you can install it globally:
The CLI offers several starter templates. In this tutorial, we’ll be creating our project using a template based on Browserify and Vueify.
Once the project has been generated, I suggest you install all its dependencies first.
To fetch data from Reddit’s servers, we’ll be using Axios, a very powerful and easy-to-use HTTP client. Therefore, add it is as a dependency.
At this point, our project has been set up.
If you enter the src directory of your project, you’ll see that it already has two files. We’ll be writing most of our code inside App.vue, a single file containing all the layout, logic, and styling of our app. It already contains some code we don’t need. Therefore, I suggest you empty its contents. Here’s an easy way to do so from the command-line:
And now, open App.vue using your favorite code editor.
Our component’s layout is going to be very simple. It will contain one heading mentioning the name of a subreddit, and one unordered list containing all its posts.
Here’s the layout I’ll be using:
As you can see, I’m using the mustache syntax for interpolating a few variables. I’m also using the
v-for directives. The
v-for directive is, of course, being used to loop through all the posts of the subreddit. I’ve used the
v-bind directive to initialize the value of
href because we can’t use mustache syntax inside an attribute.
Adding styles is optional. And really, there’s hardly anything new to learn here if you already know CSS.
If you are wondering why the
<style> tag has a
scoped attribute, it is to ensure that the styles are applied to the component only, and not globally.
The first thing we’re going to do now is initialize Axios.
Next, we’re going to specify that the component shall have two properties:
subreddit will, of course, contain the name of a subreddit, and
limit will specify the number of posts to fetch.
The component shall also have an array of posts as its
We’ll be fetching the posts from Reddit once the component has been mounted. As you might’ve guessed, we’ll be using Axios’s
get() method to do so. Once the data has been fetched from Reddit’s servers, we’ll use it to initialize the
Accordingly, add the following code:
The component is now ready to be used.
In the previous step, you saw that our component has two properties:
limit. We need to set the values of those properties before we use the component. We can do that inside the main.js file.
All you need to do is pass an extra JSON object while creating the component. Therefore, update the
render function so that it looks like this:
And that’s it. You can now view your component in action by simply running the project.
The above command should automatically open a new browser window for you showing you the component.
In this tutorial, you learned how to, in a matter of minutes, create and use a simple component using Vue 2.1.