Build a Pokédex with Vue CLI

I wanted to practice with Vue CLI and I wanted to build something fun. I’m a pokémon fan (from the 90’s) and I was thrilled when I found the pokéAPI. Then I also found NES.css and that obviously was a match made in heaven for a cool application. I only included the first 151 pokémon because I’m more a fan of the first generation pokémon 😉

Pokédex in Vue

To give a small introduction on myself, I’m a little Front-end developer 🐭 still learning a lot about Front-end. If you are a beginner too, you can hop on and read this article. And if you are an experienced developer or just a curious person who just wants to know more about Vue you can read along too of course 😉

Vue is one of the popular frameworks nowadays (along with Angular and React). You can create applications faster with a framework compared to just HTML, CSS and plain Javascript. Frameworks already have a lot of functions and plugins they offer and recommended libraries that are compatible with the framework so that you don’t have to figure out everything on your own. So why do we need a Vue CLI? This is a way to start up your Vue project with plugins and libraries installed on beforehand and enable tree shaking (only install the specific modules you need from the third party libraries). This can be a huge performance improvement over the use of CDN (script and link stylesheet tags in HTML). Also, Vue CLI helps you with an initial folder structure of your application and initial setup code for the libraries 🎉

In this tutorial, we are going to rebuild the Pokédex with Vue CLI. This tutorial is split up in four parts:

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

If you want to see the Pokédex demo on beforehand, you can view it here

The password for logging in is pokemonmaster

My Github repo is here, you can clone or fork it whenever you like

It is possible that the code in the repo is different than the code mentioned at the time of writing. Small changes might have been added for code optimizations. Also, please let me know if you see any errors or improvements for this article 😉

Let’s get started

So to first install Vue CLI globally on your computer. You need a Node.js version higher than 8.9 (you can check it by using the command node -v). If you don’t have Node.js and npm installed yet, you should install them if you want to build along.

Of course, you can also use yarn to build a new pokédex from scratch but I used npm for my project.

Let’s open the terminal. The command to install Vue CLI is as follows

npm install -g @vue/cli

To check whether you have the right version (higher than 3)

vue --version

So now let’s create a new project. Open a folder where you would like to create the project and open the terminal there.

vue create pokedex

You will be prompted to pick a preset. In our case choose the ‘Manually select features’. Pick the following options by pressing space (submit by pressing enter):

• Babel
• Router (history mode ‘yes’)
• Vuex
• Optional: Linter / Formatter (linter with prettier & lint on save)

It is okay if you by accident omit one library/plugin. You can just add it yourself later by using the npm install command on the command line (you can find the specific command for each library on npm). So why do we need Babel, Router, and Vuex?

Babel is a code transpiler that will turn new javascript code into old javascript code. New browsers such as Chrome and Firefox will be able to understand new javascript code (also known as ES2015 or ES6) but older browsers like Internet Explorer cannot understand new javascript code. This way, the application can be run on different browsers.

We use Vue Router to navigate between pages. In the old days, you would have an HTML file for every page and navigate between the pages. With vue, you can build a Single Page Application where the rendering happens on one page. Navigating between the pages is simulated with javascript. We use the history mode to override the default behavior, which is that a # is added to the URL for preventing a page reload when navigating to a different page. With the history mode we can also prevent the page reload but without the strange # in our URL.

Vuex is needed as state management. It saves the internal data/memory of your application. While your application runs the data will be stored in a central place. With this library, you can set and change the data in the store in a sophisticated way.

If you want to you can add the linter / formatter option. It is not needed to code along, but for readability it’s nice to have neatly indented code.

Next will be to open the project directory with the following command

cd pokedex

And run the application with

npm run serve

You will see the following when you follow the localhost url stated in the terminal (http://localhost:8080 by default if no other app is already running on that port)

Vue app out of the box running

If you open the project folder and go to package.json you can find the installed libraries in it and also the npm run commands you can run. That is where the npm run serve command came from. For now, you only need that command. However, it is good to know that you can add new commands and dependencies manually.

Example of the package.json

Okay, first things first. We want to add the NES.css to give our application the 8-bit look and feel. Go to index.html and add the following between the <head> tags.

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet"/>
<link href="https://unpkg.com/nes.css@latest/css/nes.min.css" rel="stylesheet" />
<style>
      html, body, pre, code, kbd, samp {
          font-family: 'Press Start 2P', cursive;
}
</style>

You might be asking what the difference is between public and the src folder. Everything placed in the public folder will not be rendered by Webpack (module bundler) which will normally do optimizations. All of the static files such as favicon will be copied and pasted in the built version of the application. The index.html is the root of the application and that is why we define the core style here. Normally I’m more of a fan of defining global styling in external CSS files instead of inline CSS but here we are only defining the font-family.

The src folder is where all the Vue magic happens. Let’s create the pages, routing and state management in the next part of this tutorial 👋 🐭