1. Port the Pokemon to individual components

poke-app/src/App.vue

@@ -8,7 +8,6 @@ import HelloWorld from './components/HelloWorld.vue'
 <template>
   <img alt="Vue logo" src="./assets/logo.png" />
   <HelloWorld msg="Hello Vue 3 + FH + Vite" />
-  <Greet></Greet>
 </template>
 
 <style>

poke-app/src/components/pokemonComp.vue

+<template>
+  <button @click="fetchPokemon">Catch Pokemon</button>
+
+  <ul>
+    <li v-for="(pokeman,index) in list" :key="index">
+      <p> {{pokeman.name}}</p>
+      <img :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ index + 1}.png`" :alt="pokeman.name">
+    </li>
+  </ul>
+</template>
+
+<script>
+export default{
+ name:'pokemonTag',
+  data(){
+    return{
+      list:[]
+    }
+  },
+  methods:{
+    async fetchPokemon(){
+      const url = 'https://pokeapi.co/api/v2/pokemon?limit=151'
+
+      const data = await fetch(url);
+      const pokemon = await data.json();
+      this.list = await pokemon.results;
+    }
+  },
+}
+</script>
\ No newline at end of file

poke-app/src/pages/Pokedex.vue

 <script>
+import pokemonTag from '../components/pokemonComp.vue'
+
 export default {
   name:'PokedexPage',
-  data(){
-    return{
-      list:[]
-    }
-  },
-  methods:{
-    async fetchPokemon(){
-      const url = 'https://pokeapi.co/api/v2/pokemon?limit=151'
-
-      const data = await fetch(url);
-      const pokemon = await data.json();
-      this.list = await pokemon.results;
+  components:{
+    pokemonTag,
   }
-  },
 
 }
 </script>
 
 <template>
 <h1>Pokedex Page</h1>
- <button @click="fetchPokemon">Catch Pokemon</button>
-
-  <ul>
-    <li v-for="(pokeman,index) in list" :key="index">
-      <p> {{pokeman.name}}</p>
-      <img :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ index + 1}.png`" :alt="pokeman.name">
-    </li>
-  </ul>
-
+<pokemonTag/>
 </template>
\ No newline at end of file