Vue.js— Ricky and Morty API

How to create a simple and fun application with Vue.js

Getúlio Rafael Ferreira
Aug 12 · 3 min read

Hello guys! this is my second article here at Medium and I’m very happy in sharing my new skills with Vue. Last year I was working on project with Angular 6, but now I have the opportunity to work and learn more about Vue and I think it is amazing!!

In this article I’ll show how to create a new Vue app, simply and easily. I’ll use the Ricky And Morty API, if you haven’t watched this show, please, stop reading now and return later LOL, I’m very anxious for next it’s season. Now, you can check the final results of our app here.

Let’s get started!

Comming soon: This article will have the part 2 with GraphQL 🤩

We’ll need to have Node installed, and vue/cli. After installing we’ll create our project with vue/cli using the command below:

vue create my-vue-project

Vue/cli has some options to configure our project, here I’ll use the Manually select features, so, select the router option, with it vue/cli will configure the vue-router for us. If you want to know more about it check vue-route here. The other configurations you can select as you wish.

Manually select features
Router

Ok, now we have the command npm run serve available, but before running it we'll install a dependency called axios for our requests, you can also use the fetch api for that.

npm install axios

Next step we’ll run our app:

npm run serve

With this command our app will run in port localhost:8080. Vue/cli will create a simple structure that we’ll modify, but don’t worry it’s very easy. First lets create a folder to keep our components, two new components called: Header.vue and Footer.vue. What’s the idea here? These components are simple and we’ll use them in our app.vue. We'll still have one more component here, called Card.vue, but soon we'll talk about it.

Folders
Header.vue
Footer.vue

Another important part in this app is its global style , let’s create it in our folder assets, called styles.css

styles.css

Remember: You can see the whole code in my github.

Alright, let’s now work on the preview folder with Home.vue. This is our main page, if you check router.js you can see it. Here the model is based on Card.vue, it will have all the logic, as you can see, v-for, key and a directive called: character-list are here. We also import API.js, a file created inside the services folder to manage our requests.

For our request, we will use a method passed by parameter. This method, called rangeCharacter, will return a new array with 8 positions that will be dynamically generated. Rick and Morty API, accepts to receive an array to filter the characters. Here we will always return eight characters randomly.

API.js
Home.vue

The next step is to pass through props the api response for the Card.vue component that will assemble each element.

This is how we’ll finish our app, the whole code is in my github, and if you have any questions or suggestions, feel free to comment. Thank you very much.

That’s all folks!

Thanks to Valter Neto

Getúlio Rafael Ferreira

Written by

Front-End Developer at GFT Technologies - Curitiba PR

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade