But, to not just update the post, I decided to do something different. Since my kids are into Pokemon, what better use of my coding skills than to make them an app where they can search for their favorite Pokemon and check their stats.<\/p>\n
So, in this post, you’ll learn how to use create-vue<\/a> (official Vue project scaffolding tool) to build a Vue.js 3<\/strong> application for searching Pokemon by using Poke API<\/a>.<\/p>\n A few years ago, this was a popular meme. It was funny because it was true \ud83d\ude42<\/p>\n However, it seems that the craziness has settled down a bit and that the war is seemingly over. For now. These top four (top 5 lists are overrated \ud83d\ude09) frameworks established themselves:<\/p>\n I added the number of Github You could argue that there are other options like Ember, Mithril, or good ‘ol jQuery even! However, this tweet<\/a> says it all:<\/p>\n Developers are fighting over which frontend framework is better.. it’s not like users know or care. They mostly care about the User Experience. UX should be our focus on the frontend.<\/p>\n<\/blockquote>\n Personally, I stuck to the Angular bandwagon since version 1.0, but that started losing its ooomph<\/em> after versions 2, 3, 4, … sorry, lost count.<\/p>\n I believe that Vue.js (due to its progressive and flexible nature) is a perfect fit for teams that have to rewrite old codebases one step at a time<\/strong>. However, you can also use it as a full-blown framework if you wish.<\/p>\n Personally, React’s JSX just seems wrong<\/em>, and some people, smarter than me, swear by that being TheRightWay\u2122, and I guess we’re not here to discuss tastes…<\/p>\n Recently I checked out Svelte and kinda like it, so will be doing a post like this for it; stay tuned.<\/p>\n General ‘framework war’ kind of questions I tend to answer in the following way:<\/p>\n Please just stop with the analysis paralysis<\/a> already.<\/p>\n Do your research, pick a framework (any framework for that matter) that the community is using, use it, and see how far it gets you.<\/p>\n All these talks about X being slow or Y being better just make no sense until you try it yourself for your use case and preference.<\/p>\n Besides, nowadays speed will not be a deciding factor among the top JS frameworks.<\/p>\n<\/blockquote>\n With all this out of the way, fasten your seatbelts, take a venti (or trenta) sized cup of coffee, and let’s go do something practical! \ud83d\udcaa<\/p>\n As said in the intro, we’ll build an application for searching (and showing) Pokemon by using Poke API<\/a>.<\/p>\n You can fork the complete source code on Github<\/a>.<\/p>\n I’m using Vue.js 3, and I’ll be referring to it as just Vue in the rest of this post.<\/p>\n<\/blockquote>\n Make sure that you have the following tools installed:<\/p>\n To start the project, run the following command (in your Terminal): This command, as their docs say<\/a>, will install and execute In the previous blog post, we used Vue CLI. That has been deprecated and Vue CLI is based on webpack, while create-vue is based on Vite. Vite supports most of the configured conventions found in Vue CLI projects out of the box, and provides a significantly better development experience due to its extremely fast startup and hot-module replacement speed. Learn more about why we recommend Vite over webpack here. You can learn more about ‘why’ Vite here<\/a>.<\/p>\n Let’s run the commands (in terminal) noted in the previous output:<\/p>\n You should get this output:<\/p>\n You should see the following page in your browser if you open http:\/\/localhost:5173<\/a>.<\/p>\n Now, let’s open this project in the editor of your choice (I’m using Visual Studio Code<\/a> + Volar<\/a> extension), and you should see something like this:<\/p>\n This is an introduction tutorial, to get you running fast, so I won’t be going into any specific details and will be only focusing on the OK, so let’s add something to our app.<\/p>\n But, where to start? \ud83e\udd14<\/p>\n Well, one of the first things I do when I come to a project for the first time is to look at the generated output. Then I try to find the strings corresponding to that output within the source code.<\/p>\n So, if you search for the string Without knowing much about Vue.js, you can see where you would change the I borrowed the image (hope they don’t mind) from Wikipedia<\/a> and saved it in the Here’s the final code that I came up with in Also, I did a few other smaller things:<\/p>\n The way this looks now is as follows: If you get stuck in any of the above steps, please reach out in the comments, and I’ll be happy to help.<\/em><\/p>\n Finally, we come to the cool part \ud83e\udd76, and that is to fetch some data from the PokeAPI and show it in our app.<\/p>\n How do we get this API? Well, if you do a simple Google search for By looking at the docs, you can find that the API endpoint that lists all the available Pokemon is this: https:\/\/pokeapi.co\/api\/v2\/pokemon<\/a>. There’s a total of 1302 records.<\/p>\n Now, fetching all this data every time you load your app would be a bad idea from the performance standpoint, but also from their fair use<\/a> policy.<\/p>\n So, what we will do is open this link<\/a> which will fetch all 1320 Pokemon endpoints. The output looks something like this:<\/p>\n Now, save this output (just Command + S or Ctrl + s if you’re on Windows) to a local file that we’ll name \u26a0\ufe0f I just want to give proper props to PokeAPI<\/a> for their awesome service \ud83d\udc4f<\/p>\n<\/blockquote>\n For our demo purposes, this will be fine, but if you’d like to deploy this somewhere where you’d get a lot of traffic (or, if the main list of Pokemon changes), you’d have to cache the responses. We’ll tackle this in another blog post, but just something to keep in mind.<\/em><\/p>\n Now we’ll want to list all the Pokemon that we have in the saved And we’ll add this portion of HTML just below the search box:<\/p>\n And, we’ll add a bit of CSS:<\/p>\n Doing this, you should have your app look something like this:<\/p>\n If you open any of the URLs that you see in the To show some additional information about a certain Pokemon (once clicked on its name in the list), we’ll update the On the click event we attached the Now we should define this function in the To show the selected Pokemon, we’ll add a bit of HTML:<\/p>\n We’re using We’re using To make it look nicer, we’ll use a bit of CSS:<\/p>\n For reference, for those following the tutorial to the dot, here’s the full listing of At this point, we can search for some Pokemon (my son’s favorite is, ofc, Pikachu), and if we click on it, we’ll get something like this:<\/p>\n If you’d like to host this on your web server, then first run Now all you have to do is take the contents of the If you don’t have a server of your own, then Vite has an extensive description<\/a> for deploying your static pages (if you don’t have the ) to many popular services like Github Pages, Netlify, Vercel, Surge, etc.<\/p>\n You can deploy to Github Pages in under 2 minutes by following their documentation<\/a>.<\/p>\n Just for brevity sake the steps are as follows:<\/p>\n Now your site will be visible online at https:\/\/username.github.io<\/a> (again, where Introduction – The Battle is Over Indeed<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/CseGOCb.png\")
<\/p>\n\n
*<\/code>s (at the time of this writing), but I don’t want you to read into that too much \ud83e\udd17<\/p>\nAnalysis paralysis will, well, paralyze you!<\/h2>\n
\n
\n
The Demo App<\/h2>\n
\n
Prerequisites<\/h2>\n
\n
Start a new app with create-vue<\/h2>\n
npm create vue@latest<\/code><\/p>\ncreate-vue<\/code>, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support (I named the project PokemonSearch_Vue3<\/em>):<\/p>\n\u2714 Project name: \u2026 PokemonSearch_Vue3\n\u2714 Package name: \u2026 pokemonsearch-vue3\n\u2714 Add TypeScript? \u2026 No \/ Yes\n\u2714 Add JSX Support? \u2026 No \/ Yes\n\u2714 Add Vue Router for Single Page Application development? \u2026 No \/ Yes\n\u2714 Add Pinia for state management? \u2026 No \/ Yes\n\u2714 Add Vitest for Unit Testing? \u2026 No \/ Yes\n\u2714 Add an End-to-End Testing Solution? \u203a No\n\u2714 Add ESLint for code quality? \u2026 No \/ Yes\n\nScaffolding project in \/Users\/Nikola.Breznjak\/Development\/Web\/Vue\/PokemonSearch_Vue3...\n\nDone. Now run:\n\ncd PokemonSearch_Vue3\nnpm install\nnpm run dev<\/code><\/pre>\ncreate-vue<\/code> is now the default. The reasons that they quote are:<\/p>\n\n
\nUnlike Vue CLI, create-vue itself is just a scaffolding tool: it creates a pre-configured project based on the features you choose, and delegates the rest to Vite. Projects scaffolded this way can directly leverage the Vite plugin ecosystem which is Rollup-compatible.<\/p>\n<\/blockquote>\nRunning our scaffolded project<\/h2>\n
cd PokemonSearch_Vue3\nnpm install\nnpm run dev<\/code><\/pre>\n VITE v5.0.12 ready in 175 ms\n\n \u279c Local: http:\/\/localhost:5173\/\n \u279c Network: use --host to expose\n \u279c press h + enter to show help<\/code><\/pre>\n![\"\"](\"https:\/\/i.imgur.com\/T9SICEF.png\")
<\/p>\nFolder structure<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/6WHFJn4.png\")
<\/p>\nsrc<\/code> folder.<\/p>\nAdd content<\/h2>\n
You did it!<\/code>, you’ll see the string is within the App.vue<\/code> file. This file contains the following code:<\/p>\n<script setup>\nimport HelloWorld from '.\/components\/HelloWorld.vue'\nimport TheWelcome from '.\/components\/TheWelcome.vue'\n<\/script>\n\n<template>\n <header>\n <img alt="Vue logo" class="logo" src=".\/assets\/logo.svg" width="125" height="125" \/>\n\n <div class="wrapper">\n <HelloWorld msg="You did it!" \/>\n <\/div>\n <\/header>\n\n <main>\n <TheWelcome \/>\n <\/main>\n<\/template>\n\n<style scoped>\nheader {\n line-height: 1.5;\n}\n\n.logo {\n display: block;\n margin: 0 auto 2rem;\n}\n\n@media (min-width: 1024px) {\n header {\n display: flex;\n place-items: center;\n padding-right: calc(var(--section-gap) \/ 2);\n }\n\n .logo {\n margin: 0 2rem 0 0;\n }\n\n header .wrapper {\n display: flex;\n place-items: flex-start;\n flex-wrap: wrap;\n }\n}\n<\/style><\/code><\/pre>\nYou did it!<\/code> text. So, let’s change that to Welcome to Pokemon Search<\/code>. Save that, and voila!, you’ll see the change reflected immediately in your browser.<\/p>\nAdd some style<\/h2>\n
assets<\/code> folder as logo.webp<\/code>, added a search input, and styled it a bit to match it with the Pokemon style. In case you’re wondering, I asked ChatGPT to help with coming up with the style<\/em> \ud83d\ude42<\/p>\nApp.vue<\/code>:<\/p>\n<template>\n <header>\n <img alt="Vue logo" class="logo" src=".\/assets\/logo.webp" \/>\n <\/header>\n\n <main>\n <div class="search-container">\n <input class="search-box" type="text" placeholder="Search..." v-model="searchTerm">\n <\/div>\n <\/main>\n<\/template>\n\n<style scoped>\nheader {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.logo {\n margin: 0 2rem 0 0;\n}\n\n.search-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n gap: 10px;\n}\n\n.search-box {\n width: 30%;\n height: 50px;\n font-size: 1.5em;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 40px 0;\n text-align: center;\n}<\/code><\/pre>\n\n
background: linear-gradient(to right, #FDDF3C, #3B4CCA);<\/code> in the base.css<\/code> file in the body<\/code> tag<\/li>\nmain.css<\/code> file altogether<\/li>\nbase.css<\/code> in the main.js<\/code> file instead of main.css<\/code><\/li>\ncomponents<\/code> folder<\/li>\n<\/ul>\n![\"\"](\"https:\/\/i.imgur.com\/hrX5ZR6.png\")
<\/p>\nPokemon API<\/h2>\n
pokemon api<\/code> and open the first link<\/a>, you’ll also get to the documentation<\/a> for their API.<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/BlKuxTW.png\")
<\/p>\npokemonapi.json<\/code> and place this file in the src\/assets<\/code> folder.<\/p>\n\n
Show the data<\/h2>\n
pokemonapi.json<\/code> file. To do that, we’ll write some Javascript code in the top of the App.vue<\/code> file that looks like this:<\/p>\n<script>\nimport pokemonData from '.\/assets\/pokemonapi.json';\n\nexport default {\n data() {\n return {\n pokemonList: pokemonData.results,\n searchTerm: '',\n selectedPokemon: null\n }\n },\n computed: {\n filteredPokemonList() {\n return this.pokemonList.filter(pokemon => pokemon.name.includes(this.searchTerm));\n }\n }\n}\n<\/script><\/code><\/pre>\nfilteredPokemonList<\/code> function returns the list of pokemon that we loaded from the pokemonapi.json<\/code> file and filters them by what we enter in the input box.<\/p>\n<ul>\n <li v-for="pokemon in filteredPokemonList" :key="pokemon.id" class="pokemon-item">\n {{ pokemon.name }}\n <\/li>\n<\/ul><\/code><\/pre>\n.pokemon-item {\n float: left;\n margin: 10px;\n}\n.pokemon-item a {\n color: #000;\n text-decoration: none;\n font-size: 16px;\n transition: color 0.3s ease;\n text-transform: capitalize;\n}\n\n.pokemon-item a:hover {\n color: #3B4CCA;\n}\n\nul {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 5px;\n list-style: none;\n}<\/code><\/pre>\n![\"\"](\"https:\/\/i.imgur.com\/9CtWoYV.png\")
<\/p>\nGet additional details about each Pokemon<\/h2>\n
pokemonapi.json<\/code> file, you will get something like this:<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/0e52ATX.png\")
<\/p>\nli<\/code> item by adding the a<\/code> link to it like this:<\/p>\n<li v-for="pokemon in filteredPokemonList" :key="pokemon.id" class="pokemon-item">\n <a href="#" @click="showPokemon(pokemon.url)">{{ pokemon.name }}<\/a>\n <\/li><\/code><\/pre>\nshowPokemon<\/code> function (by using @click<\/code>) and passed it the URL that we get in the main API call (loaded from the JSON file).<\/p>\nmethods<\/code> object like this (I’m showing the contents of the whole script tag):<\/p>\nimport pokemonData from '.\/assets\/pokemonapi.json';\n\nexport default {\n data() {\n return {\n pokemonList: pokemonData.results,\n searchTerm: '',\n selectedPokemon: null\n }\n },\n computed: {\n filteredPokemonList() {\n return this.pokemonList.filter(pokemon => pokemon.name.includes(this.searchTerm));\n }\n },\n methods: {\n async showPokemon(url) {\n const response = await fetch(url);\n if (!response.ok) {\n console.error(`Error fetching Pokemon: ${response.statusText}`);\n return;\n }\n\n this.selectedPokemon = await response.json();\n console.log(this.selectedPokemon);\n }\n }\n}<\/code><\/pre>\n<div class="pokemon-details" v-if="selectedPokemon">\n <h2>{{ selectedPokemon.name }}<\/h2>\n <img :src="selectedPokemon.sprites.front_default" alt="selectedPokemon.name">\n <p>Height: {{ selectedPokemon.height }}<\/p>\n <p>Weight: {{ selectedPokemon.weight }}<\/p>\n\n <div v-for="(stat, index) in selectedPokemon.stats" :key="index">\n <p>{{ stat.stat.name }}: {{ stat.base_stat }}<\/p>\n <\/div>\n<\/div><\/code><\/pre>\nv-if="selectedPokemon"<\/code> so that the line {{ selectedPokemon.name }}<\/code> doesn’t throw an error for trying to access a property that doesn’t exist on the object selectedPokemon<\/code> (which is initialized as null<\/code> in the beginnning).<\/p>\nv-for<\/code> to loop through all the elements of the stats<\/code> array and output the name<\/code> and base_stat<\/code> properties.<\/p>\n.pokemon-details {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 30%;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #000;\n border-radius: 10px;\n color: #000;\n text-transform: capitalize;\n}\n\n.pokemon-details img {\n width: 100px;\n height: 100px;\n}<\/code><\/pre>\nHelloWorld.vue<\/code> file:<\/p>\n<script>\nimport pokemonData from '.\/assets\/pokemonapi.json';\n\nexport default {\n data() {\n return {\n pokemonList: pokemonData.results,\n searchTerm: '',\n selectedPokemon: null\n }\n },\n computed: {\n filteredPokemonList() {\n return this.pokemonList.filter(pokemon => pokemon.name.includes(this.searchTerm));\n }\n },\n methods: {\n async showPokemon(url) {\n const response = await fetch(url);\n if (!response.ok) {\n console.error(`Error fetching Pokemon: ${response.statusText}`);\n return;\n }\n\n this.selectedPokemon = await response.json();\n console.log(this.selectedPokemon);\n }\n }\n}\n<\/script>\n\n<template>\n <header>\n <img alt="Vue logo" class="logo" src=".\/assets\/logo.webp" \/>\n <\/header>\n\n <main>\n <div class="search-container">\n <input class="search-box" type="text" placeholder="Search..." v-model="searchTerm">\n <\/div>\n\n <div class="pokemon-details" v-if="selectedPokemon">\n <h2>{{ selectedPokemon.name }}<\/h2>\n <img :src="selectedPokemon.sprites.front_default" alt="selectedPokemon.name">\n <p>Height: {{ selectedPokemon.height }}<\/p>\n <p>Weight: {{ selectedPokemon.weight }}<\/p>\n\n <div v-for="(stat, index) in selectedPokemon.stats" :key="index">\n <p>{{ stat.stat.name }}: {{ stat.base_stat }}<\/p>\n <\/div>\n <\/div>\n\n <ul>\n <li v-for="pokemon in filteredPokemonList" :key="pokemon.id" class="pokemon-item">\n <a href="#" @click="showPokemon(pokemon.url)">{{ pokemon.name }}<\/a>\n <\/li>\n <\/ul>\n <\/main>\n<\/template>\n\n<style scoped>\nheader {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n}\n\n.logo {\n margin: 0 2rem 0 0;\n}\n\n.search-container {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n \/* Change the direction to row *\/\n gap: 10px;\n}\n\n.search-box {\n width: 30%;\n height: 50px;\n font-size: 1.5em;\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 5px;\n margin: 40px 0;\n text-align: center;\n}\n\n.pokemon-item {\n float: left;\n margin: 10px;\n}\n.pokemon-item a {\n color: #000;\n text-decoration: none;\n font-size: 16px;\n transition: color 0.3s ease;\n text-transform: capitalize;\n}\n\n.pokemon-item a:hover {\n color: #3B4CCA;\n}\n\nul {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n gap: 5px;\n list-style: none;\n}\n\n.pokemon-details {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 30%;\n margin: 20px auto;\n padding: 20px;\n border: 1px solid #000;\n border-radius: 10px;\n color: #000;\n text-transform: capitalize;\n}\n\n.pokemon-details img {\n width: 100px;\n height: 100px;\n}\n<\/style><\/code><\/pre>\nB e a utiful<\/h2>\n
![\"\"](\"https:\/\/i.imgur.com\/DEWVNg7.png\")
<\/p>\nDeployment<\/h2>\n
npm run build<\/code> and you’ll get an output similar to this:<\/p>\n![\"\"](\"https:\/\/i.imgur.com\/YHNDNYB.png\")
<\/p>\ndist<\/code> folder and ‘paste’ it on your static web server.<\/p>\n\n
username.github.io<\/code>, where username<\/code> is your username<\/code> on GitHub.<\/li>\ngit clone https:\/\/github.com\/username\/username.github.io<\/code><\/li>\ndist<\/code> folder<\/li>\ngit add --all \ngit commit -m "Initial commit"\ngit push -u origin main<\/code><\/pre>\nusername<\/code> is your Github username)<\/p>\n