DEBUG dependance

assets/tailwind.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

components/Footer.vue

@@ -0,0 +1,7 @@
+<template>
+  <v-footer color="grey darken-3" padless>
+    <v-col class="text-center white--text py-4">
+      © {{ new Date().getFullYear() }} — Made by Le J
+    </v-col>
+  </v-footer>
+</template>

components/GenerationFilter.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-select
+    :items="generations"
+    v-model="internalSelected"
+    label="Filtrer par génération"
+  />
+</template>
+
+<script>
+export default {
+  props: ['selected'],
+  data() {
+    return {
+      generations: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      internalSelected: this.selected
+    }
+  },
+  watch: {
+    selected(newVal) {
+      this.internalSelected = newVal
+    },
+    internalSelected(newVal) {
+      this.$emit('change', newVal)
+    }
+  }
+}
+</script>

components/Header.vue

@@ -0,0 +1,5 @@
+<template>
+  <v-app-bar color="deep-purple accent-4" dark>
+    <v-toolbar-title class="text-white">Tyradex Pokédex</v-toolbar-title>
+  </v-app-bar>
+</template>

components/PokemonCard.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-col cols="12" sm="4" md="3">
+    <v-card class="hover:scale-105 transition" @click="$router.push('/pokemon/' + pokemon.id)">
+      <v-img :src="pokemon.sprites.regular" height="200px" />
+      <v-card-title>{{ pokemon.name.fr }}</v-card-title>
+    </v-card>
+  </v-col>
+</template>
+
+<script>
+export default {
+  props: ['pokemon']
+}
+</script>

layouts/default.vue

@@ -1,117 +1,15 @@
 <template>
-  <v-app dark>
-    <v-navigation-drawer
-      v-model="drawer"
-      :mini-variant="miniVariant"
-      :clipped="clipped"
-      fixed
-      app
-    >
-      <v-list>
-        <v-list-item
-          v-for="(item, i) in items"
-          :key="i"
-          :to="item.to"
-          router
-          exact
-        >
-          <v-list-item-action>
-            <v-icon>{{ item.icon }}</v-icon>
-          </v-list-item-action>
-          <v-list-item-content>
-            <v-list-item-title v-text="item.title" />
-          </v-list-item-content>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-app-bar
-      :clipped-left="clipped"
-      fixed
-      app
-    >
-      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />
-      <v-btn
-        icon
-        @click.stop="miniVariant = !miniVariant"
-      >
-        <v-icon>mdi-{{ `chevron-${miniVariant ? 'right' : 'left'}` }}</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        @click.stop="clipped = !clipped"
-      >
-        <v-icon>mdi-application</v-icon>
-      </v-btn>
-      <v-btn
-        icon
-        @click.stop="fixed = !fixed"
-      >
-        <v-icon>mdi-minus</v-icon>
-      </v-btn>
-      <v-toolbar-title v-text="title" />
-      <v-spacer />
-      <v-btn
-        icon
-        @click.stop="rightDrawer = !rightDrawer"
-      >
-        <v-icon>mdi-menu</v-icon>
-      </v-btn>
-    </v-app-bar>
-    <v-content>
-      <v-container>
+  <v-app>
+    <Header />
+    <v-main>
       <nuxt />
-      </v-container>
-    </v-content>
-    <v-navigation-drawer
-      v-model="rightDrawer"
-      :right="right"
-      temporary
-      fixed
-    >
-      <v-list>
-        <v-list-item @click.native="right = !right">
-          <v-list-item-action>
-            <v-icon light>
-              mdi-repeat
-            </v-icon>
-          </v-list-item-action>
-          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
-        </v-list-item>
-      </v-list>
-    </v-navigation-drawer>
-    <v-footer
-      :fixed="fixed"
-      app
-    >
-      <span>&copy; {{ new Date().getFullYear() }}</span>
-    </v-footer>
+    </v-main>
+    <Footer />
   </v-app>
 </template>
 
 <script>
-export default {
-  data () {
-    return {
-      clipped: false,
-      drawer: false,
-      fixed: false,
-      items: [
-        {
-          icon: 'mdi-apps',
-          title: 'Welcome',
-          to: '/'
-        },
-        {
-          icon: 'mdi-chart-bubble',
-          title: 'Inspire',
-          to: '/inspire'
-        }
-      ],
-      miniVariant: false,
-      right: true,
-      rightDrawer: false,
-      title: 'Vuetify.js'
-    }
-  }
-}
+import Header from '@/components/Header.vue'
+import Footer from '@/components/Footer.vue'
+export default { components: { Header, Footer } }
 </script>

nuxt.config.js

@@ -25,7 +25,6 @@ export default {
   ** Global CSS
   */
   css: [
-    '@/assets/tailwind.css'
   ],
   /*
   ** Plugins to load before mounting the App
@@ -37,6 +36,7 @@ export default {
   */
   buildModules: [
     '@nuxtjs/vuetify',
+    '@nuxtjs/tailwindcss'
   ],
   /*
   ** Nuxt.js modules

package.json

@@ -11,12 +11,12 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "nuxt": "^2.0.0"
+    "@nuxtjs/vuetify": "^1.12.3",
+    "axios": "^1.10.0",
+    "nuxt": "^2.0.0",
+    "vuetify": "^2.7.1"
   },
   "devDependencies": {
-    "@nuxtjs/vuetify": "^1.0.0",
-    "autoprefixer": "^9.8.8",
-    "postcss": "8.4.31",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
+    "@nuxtjs/tailwindcss": "^6.14.0"
   }
 }

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 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>
-      <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>
 </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>