johanleroy/ENI-vue2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DEBUG dependance

Browse Source
This commit is contained in:
jleroy2023
2025-07-15 11:49:22 +02:00
parent e624d65afa
commit de9ca3c4c1
10 changed files with 122 additions and 203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/tailwind.css
View File

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

7
components/Footer.vue Normal file
View File

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

27
components/GenerationFilter.vue Normal file
View File

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

5
components/Header.vue Normal file
View File

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

14
components/PokemonCard.vue Normal file
View File

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

118
layouts/default.vue
View File

@@ -1,117 +1,15 @@
<template> <template>
<v-app dark> <v-app>
<v-navigation-drawer <Header />
v-model="drawer" <v-main>
: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>
<nuxt /> <nuxt />
</v-container> </v-main>
</v-content> <Footer />
<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-app> </v-app>
</template> </template>
<script> <script>
export default { import Header from '@/components/Header.vue'
data () { import Footer from '@/components/Footer.vue'
return { export default { components: { Header, Footer } }
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'
}
}
}
</script> </script>

2
nuxt.config.js
View File

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

10
package.json
View File

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

114
pages/index.vue
View File

@@ -1,92 +1,42 @@
<template> <template>
<v-layout <div class="p-4">
column <GenerationFilter :selected="selectedGen" @change="onGenChange" />
justify-center <v-container>
align-center <v-row>
> <PokemonCard
<v-flex v-for="poke in pokemons"
xs12 :key="poke.id"
sm8 :pokemon="poke"
md6 />
> </v-row>
<div class="text-center"> </v-container>
<logo />
<vuetify-logo />
</div> </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> </template>
<script> <script>
import Logo from '~/components/Logo.vue' import axios from 'axios'
import VuetifyLogo from '~/components/VuetifyLogo.vue' import PokemonCard from '@/components/PokemonCard.vue'
import GenerationFilter from '@/components/GenerationFilter.vue'
export default { export default {
components: { components: { PokemonCard, GenerationFilter },
Logo, data: () => ({
VuetifyLogo 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> </script>

21
pages/pokemon/_id.vue Normal file
View File

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