Build a Pokédex with Vue CLI (part 3)

In the previous two parts of this tutorial we discussed the initial Vue CLI setup, how to set up routing and state management and we created two pages of the application. In this part, we will create the components.

This is the overview of the tutorial:

1. Initial setup
2. Routing and State management
3. Components
4. Optional: Persisted state & Lessons learned

At the end of this tutorial, we will have a cool pokédex application which shows the first 151 pokémon and you can look up the pokédex entries of your favorite pokémon.

Components

We need the following components:

• List which shows the available pokémon
• List of the favorite pokémon
• Card which shows an individual pokémon

Card for single pokémon

Let’s check what we will get from the PokéAPI. When querying for the first 151 pokémon with the following query

https://pokeapi.co/api/v2/pokemon?limit=151

We will receive a long list of pokémon names with their URL for more information about the pokémon.

In your components folder, remove the HelloWorld.vue and create the following files PokemonList.vue, SummaryFavorites.vue and PokemonCard.vue.

I can imagine these code snippets can look a bit overwhelming. Between the template tags, there is HTML but with strange looking attributes such as v-if and v-for. These are called directives in Vue. A directive is a special token in the markup that tells Vue to do something to a DOM element.

The v-if makes parts of the template render conditionally (that is why there is also a v-else). The v-for makes it possible to loop over elements to render them so there is no need for writing out everything in HTML by hand.

The @click triggers a function after a click event is fired on that specific element. You might wonder why some attributes have a : in front of them. That is a shortcut for v-bind which allows you to use javascript expressions for passing data to the attribute.

And the most important thing here is, of course, the text interpolation with brackets{{ }}

You can use the brackets in every HTML element where you can define the text. Everything between the brackets will be read as a javascript expression. This way you can render the data from the Vue instance inside the template.

In the script template, the data contains the properties belonging to the Vue instance. The props are properties the Vue instance receives from other components that are calling it. Here we can define what kind of type we are expecting as property and whether it is required from the component which calls us.

The methods contains only functions known and available within that Vue instance and any function registered as a computed property is a special function that can be used as a variable. The value of the property will be automatically updated when its dependencies change.

As mentioned before, there are Vue lifecycle hooks such as created for executing methods at the desired time during the ‘lifetime’ of a Vue instance. For example, other lifecycle hooks are beforeUpdate and beforeDestroy. This makes it possible to call a method whenever a Vue instance is being updated (can come in handy when debugging).

Update the pages

Now we can update the pages by importing the components and pass data to them.

Update home.vue and favorites.vue as follows

We are importing the components in the pages and register them as components of the page. Then we use the components as named at import as HTML elements in the template. This is the place in the DOM where they will be rendered (in case of home.vue as child of div with class select-pokemon-page). We give the components the promised prop data as we defined in the components and we will map the emitted events to the methods known by the page. As mentioned before, by using mapState the page knows specific data from the Vuex state object. By using mapActions we can trigger specific actions from the Vuex store. All the mapped actions will be available as methods on this. That is why we can use the methods directly in the template.

Now your application should look like the screenshots. Open your application in the browser and choose some pokémon. Your application should look like the following after choosing 10 pokémon.

If you want to you can add a login page like in my repository, but it is not necessary for the pokédex. In my repository, I had to implement a password validation as part of an assignment 😉

In the last part of the tutorial, I will discuss persisted state for the application (that your data will still be available after reloading the page) and the lessons learned from creating this project. 💡