DEBUG dependance

pages/index.vue

@@ -1,92 +1,42 @@
 <template>
-  <v-layout
-    column
-    justify-center
-    align-center
-  >
-    <v-flex
-      xs12
-      sm8
-      md6
-    >
-      <div class="text-center">
-        <logo />
-        <vuetify-logo />
-      </div>
-      <v-card>
-        <v-card-title class="headline">
-          Welcome to the Vuetify + Nuxt.js template
-        </v-card-title>
-        <v-card-text>
-          <p>Vuetify is a progressive Material Design component framework for Vue.js. It was designed to empower developers to create amazing applications.</p>
-          <p>
-            For more information on Vuetify, check out the <a
-              href="https://vuetifyjs.com"
-              target="_blank"
-            >
-              documentation
-            </a>.
-          </p>
-          <p>
-            If you have questions, please join the official <a
-              href="https://chat.vuetifyjs.com/"
-              target="_blank"
-              title="chat"
-            >
-              discord
-            </a>.
-          </p>
-          <p>
-            Find a bug? Report it on the github <a
-              href="https://github.com/vuetifyjs/vuetify/issues"
-              target="_blank"
-              title="contribute"
-            >
-              issue board
-            </a>.
-          </p>
-          <p>Thank you for developing with Vuetify and I look forward to bringing more exciting features in the future.</p>
-          <div class="text-xs-right">
-            <em><small>&mdash; John Leider</small></em>
-          </div>
-          <hr class="my-3">
-          <a
-            href="https://nuxtjs.org/"
-            target="_blank"
-          >
-            Nuxt Documentation
-          </a>
-          <br>
-          <a
-            href="https://github.com/nuxt/nuxt.js"
-            target="_blank"
-          >
-            Nuxt GitHub
-          </a>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn
-            color="primary"
-            nuxt
-            to="/inspire"
-          >
-            Continue
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-flex>
-  </v-layout>
+  <div class="p-4">
+    <GenerationFilter :selected="selectedGen" @change="onGenChange" />
+    <v-container>
+      <v-row>
+        <PokemonCard
+          v-for="poke in pokemons"
+          :key="poke.id"
+          :pokemon="poke"
+        />
+      </v-row>
+    </v-container>
+  </div>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
-import VuetifyLogo from '~/components/VuetifyLogo.vue'
+import axios from 'axios'
+import PokemonCard from '@/components/PokemonCard.vue'
+import GenerationFilter from '@/components/GenerationFilter.vue'
 
 export default {
-  components: {
-    Logo,
-    VuetifyLogo
+  components: { PokemonCard, GenerationFilter },
+  data: () => ({
+    selectedGen: 1,
+    pokemons: [],
+  }),
+  async mounted() {
+    await this.loadPokemons()
+  },
+  methods: {
+    async loadPokemons() {
+      const res = await axios.get('https://tyradex.vercel.app/api/v1')
+      const all = res.data
+      this.pokemons = all.filter(p => p.generation.id === this.selectedGen)
+    },
+    async onGenChange(gen) {
+      this.selectedGen = gen
+      await this.loadPokemons()
+    },
   }
 }
 </script>

pages/pokemon/_id.vue

@@ -0,0 +1,21 @@
+<template>
+  <v-container class="py-10">
+    <v-card v-if="pokemon" class="mx-auto max-w-xl p-6">
+      <h1 class="text-3xl font-bold mb-4">{{ pokemon.name.fr }}</h1>
+      <img :src="pokemon.sprites.regular" class="w-64 mx-auto mb-4" />
+      <p><strong>Génération :</strong> {{ pokemon.generation.name }}</p>
+      <p><strong>Types :</strong> {{ pokemon.types.map(t => t.name).join(', ') }}</p>
+    </v-card>
+  </v-container>
+</template>
+
+<script>
+import axios from 'axios'
+
+export default {
+  async asyncData({ params }) {
+    const { data } = await axios.get(`https://tyradex.vercel.app/api/v1/${params.id}`)
+    return { pokemon: data }
+  }
+}
+</script>