DEV {JS}

Mode sombre

nstallation et configuration ​

Avant de pouvoir utiliser Pinia, il faut d’abord l’installer dans votre projet Vue.

Dans le Pokédex Vuetify, l’installation est normalement déjà faite, mais voici quand même les étapes essentielles pour bien comprendre.

Étape 1 – Installation via NPM ​

Ouvrez un terminal à la racine de votre projet, puis tapez :

bash
npm install pinia

Étape 2 – Enregistrement de Pinia dans l’application Vue ​

Dans le fichier main.js, vous devez importer createPinia, puis l'ajouter à votre application Vue.

Voici ce que cela donne :

js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.mount('#app')

Avec ces quelques lignes, Pinia est installé et prêt à l’emploi.

Étape 3 – Organisation des fichiers ​

Dans notre Pokédex, les fichiers Pinia sont rangés dans le dossier :

src/stores/

C’est ici que vous trouverez :

  • pokemonStore.js pour la gestion des Pokémon,
  • authStore.js pour simuler la connexion (ajouté plus tard).

Récapitulatif ​

  • ✅ Pinia est installé avec NPM,
  • ✅ Enregistré dans main.js,
  • ✅ Les fichiers de stores sont placés dans src/stores.

Vous êtes maintenant prêt à créer votre premier store dans le chapitre suivant.

👉 Lire le chapitre 3 – Créer un store Pokémon