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

To give a small recap, in this tutorial I want to show you how to create a cool Pokédex application with Vue. In the previous part of this tutorial, I wrote about the initial Vue CLI setup for the Pokédex application.

In this part, we will create pages, fix the routing and set up the state management for the application. I would suggest copying the images of the assets folder from the repository to the assets folder in your own project to recreate the same view.

The src folder is where all the Vue magic happens. Let’s create the pages now. 👷

Photo by Jay on Unsplash

Pages & Routing

There are two pages we want to create:

• A page where a pokémon can be selected from the list
• A page where you can find details on your favorite pokémon

At first, we want to make sure that the routing works fine. In App.vue, the root element of the Vue application (it will be rendered before your custom Vue elements) we have to check whether it contains <router-view/> All the pages and their components will be rendered in that tag.

In fact, replace the content with the following:

<template>
<div>
<router-view />
</div>
</template>

Next, check if the main.js is the same as follows:

Create a folder named pages within src folder and add a file named home.vue. Place the following code in it:

After that, create a new file called favorites.vue with the following content:

As you can see, a Vue file exists of three parts:

• template
• script
• style

The template is similar to HTML but has extra Vue features which will be rendered to HTML in the DOM by Vue. In the script, the logic for the specific Vue instance is specified. The style is where you can define the CSS or a CSS pre-processor if it is configured in your project.

It is good to know that you don’t have to use the template, script, and style. You can omit the style if you don’t want any custom styling for the Vue instance. You can even omit the template part, but then nothing will be shown for that instance. The script part can also be omitted if the component does not need any data or logic.

What we have to do now is set up the routing in router.js. Add the pages as imports and add them to the routes as components.

In case you haven’t already, go to your terminal and execute the command

npm run serve

If you go to your localhost:8080 now you can see ‘Home page’ in pixel font style together with a Pokémon logo. You can even go to localhost:8080/favorites and you will view a page which shows the title ‘Your favorite Pokémon’ and a back button which you can use to go back to the home page.

Initial page when opening localhost:8080

When you navigate to localhost:8080/favorites

Great job! 🎉

You can leave the view folder as is or you can delete it. We won’t use it for our Pokédex.

State manager

As you could see in home.vue we called the pokéAPI in the created hook with the fetch inside getPokemonData(). created is one of the Vue lifecycle hooks. However, we are not saving the pokémon data anywhere. We should save it in a data store. The one we use will be Vuex.

To keep it simple for this tutorial I will only discuss Vuex briefly.

For our application, we want that more than one component can have access to the same data. We store this data in a store, one object which is called the state. The state can be filled and changed by mutations. These mutations are the only ones to have direct access to the state. You cannot trigger mutations directly, that needs to be done with actions.The main reasoning behind this is code maintainability in bigger applications. The actions can contain business logic and can be asynchronous, but when they call mutations (they can call multiple mutations) the mutation has only one task which is to change the state.

Change the content of state.js to the following:

So we have two properties in the State object: statePokemonDataList and stateFavoritePokemonList. These can be directly manipulated by the mutations which are called by the actions.

Now we have to update our Pages by mapping the properties from the state to make the data accessible within the page. Then we will also map the actions to usable methods on the page so we can trigger an action when the data in the store needs to be changed. In order to do so, we need mapState and mapActions from the vuex library.

Now, I would recommend that you use the Vue.js devtools plugin for either Firefox or Chrome so you can see that the pokémon data retrieved from the pokéAPI is stored in the state.

So far so good! 😁 Now we need to create the components for the pages. This will be explained in part 3 of this tutorial.