Vue.js— Ricky and Morty API
How to create a simple and fun application with Vue.js
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 🤩
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.
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.
Another important part in this app is its global style , let’s create it in our folder assets, called 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.
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!