Formation Vue Router & Pinia : navigation et état global
Vous maîtrisez les composants Vue.js 3, mais dès qu'il faut gérer plusieurs pages, des URLs et des données partagées (panier, utilisateur, filtres…), il manque deux briques : Vue Router et Pinia.
C'est le sujet de ma formation dédiée (10 h) : structurer une SPA avec une navigation claire et un état global maintenable.
Une application Vue.js dépasse vite le stade du « composant unique ». Il faut :
- des routes pour naviguer sans recharger la page (Vue Router) ;
- un état partagé entre composants et pages (Pinia, successeur recommandé de Vuex).
Sans ces outils, on finit par propager des props sur dix niveaux ou à dupliquer des données — difficile à maintenir.
Ce que vous apprenez dans la formation
La formation Vue Router & Pinia parcourt la documentation officielle des deux outils, avec des exemples progressifs :
Vue Router
- configuration des routes et routes dynamiques ;
- paramètres, queries et navigation programmatique ;
- routes imbriquées et lazy loading ;
- navigation guards (équivalent de middlewares côté frontend).
Pinia
- création de stores modulaires ;
- state, getters et actions ;
- plugins Pinia et bonnes pratiques d’architecture ;
- partage de données (panier, session utilisateur, préférences…).
Exemples légers
Route dynamique :
// router/index.js
const routes = [
{ path: '/rooms/:id', name: 'room.show', component: RoomShow },
]
Store Pinia minimal :
// stores/cart.js
import { defineStore } from 'pinia'
export const useCartStore = defineStore('cart', {
state: () => ({ items: [] }),
actions: {
addItem(room) {
this.items.push(room)
},
},
})
Ce sont les patterns que vous réutiliserez dans une SPA connectée à Laravel — notamment dans la formation Laravel & Vue.js.
Prérequis
Formation Vue.js 3 recommandée au préalable (voir ma formation Vue.js 3). Vous devez déjà être à l’aise avec les composants, la réactivité et la Composition API.
Playlists et ressources
Page pilier : Vue.js : tutoriels, vidéos et formations.
Découvrir la formation
👉 Formation Vue Router & Pinia en français — 10 h, documentation officielle, mise à jour 2025.
Pour aller plus loin
- Pack Vue.js, Router & Pinia — Vue.js 3 + Router/Pinia dans un parcours cohérent ;
- Comment relier Laravel et Vue.js ? — intégration fullstack avec API et panier ;
- Pack fullstack Laravel & Vue.js — les 4 formations pour être opérationnel sur le stack complet.
Conclusion
Vue Router et Pinia transforment une collection de composants en application structurée. Ce sont des prérequis quasi indispensables avant de connecter Vue.js à une API Laravel — et des compétences très recherchées sur le marché frontend.
