src/
├── app/                    # bootstrap de l'application (plugins, router, pinia)
│   ├── providers/          # ex: configuration i18n, Sentry, analytics
│   └── main.ts
├── modules/                 # découpage par DOMAINE MÉTIER, pas par type de fichier
│   ├── panier/
│   │   ├── components/
│   │   ├── composables/
│   │   ├── stores/
│   │   ├── api/
│   │   ├── types.ts
│   │   └── routes.ts        # module auto-suffisant : ajoute ses propres routes
│   ├── catalogue/
│   └── authentification/
├── shared/                  # code transverse réutilisé par plusieurs modules
│   ├── ui/                  # composants génériques (Bouton, Modale, Champ...)
│   ├── composables/
│   └── utils/
└── router/
    └── index.ts              # agrège les routes de chaque module

// modules/panier/routes.ts — chaque module expose ses propres routes, agrégées au niveau global
import type { RouteRecordRaw } from 'vue-router'

export const routesPanier: RouteRecordRaw[] = [
  { path: '/panier', name: 'panier', component: () => import('./pages/PagePanier.vue') },
]

// router/index.ts — agrégation : ajouter un module ne touche qu'à UN fichier
import { createRouter, createWebHistory } from 'vue-router'
import { routesPanier } from '../modules/panier/routes'
import { routesCatalogue } from '../modules/catalogue/routes'
import { routesAuth } from '../modules/authentification/routes'

export const router = createRouter({
  history: createWebHistory(),
  routes: [...routesPanier, ...routesCatalogue, ...routesAuth],
})

// modules/catalogue/api/produitsApi.ts — couche d'accès aux données ISOLÉE des composants
// (facilement mockable en test, et remplaçable si le backend change de forme)
import { httpClient } from '@/shared/api/httpClient'
import type { Produit } from '../types'

export const produitsApi = {
  lister: (filtres?: { categorie?: string }) =>
    httpClient.get<Produit[]>('/produits', { params: filtres }),
  obtenir: (id: number) =>
    httpClient.get<Produit>(`/produits/${id}`),
  creer: (payload: Omit<Produit, 'id'>) =>
    httpClient.post<Produit>('/produits', payload),
}

// Les composants/stores appellent produitsApi, JAMAIS fetch() directement :
// un seul endroit à modifier pour changer d'intercepteur, gérer le retry, ou muter l'API.

// shared/api/httpClient.ts — client HTTP centralisé : auth, retry, gestion d'erreur uniformisée
import { useAuthStore } from '@/modules/authentification/stores/auth'

async function requete<T>(url: string, options: RequestInit = {}): Promise<T> {
  const auth = useAuthStore()

  const reponse = await fetch(url, {
    ...options,
    headers: {
      'Content-Type': 'application/json',
      ...(auth.token ? { Authorization: `Bearer ${auth.token}` } : {}),
      ...options.headers,
    },
  })

  if (reponse.status === 401) {
    await auth.rafraichirToken()
    return requete<T>(url, options) // un seul retry après rafraîchissement du token
  }
  if (!reponse.ok) {
    throw new Error(`Erreur API ${reponse.status} sur ${url}`)
  }
  return reponse.json()
}

export const httpClient = {
  get: <T>(url: string, opts?: RequestInit) => requete<T>(url, { ...opts, method: 'GET' }),
  post: <T>(url: string, body: unknown, opts?: RequestInit) =>
    requete<T>(url, { ...opts, method: 'POST', body: JSON.stringify(body) }),
}

// Pattern "façade" pour un composable complexe : masque la complexité interne derrière une API simple
// modules/panier/composables/usePanier.ts
import { storeToRefs } from 'pinia'
import { usePanierStore } from '../stores/panier'
import { useNotifications } from '@/shared/composables/useNotifications'

export function usePanier() {
  const store = usePanierStore()
  const { articles, total } = storeToRefs(store)
  const { notifier } = useNotifications()

  async function ajouterAvecFeedback(produit: { id: number; nom: string; prix: number }) {
    store.ajouter(produit)
    notifier(`${produit.nom} ajouté au panier`, { type: 'succes' })
  }

  return { articles, total, ajouterAvecFeedback }
}
// Le composant n'a besoin de connaître NI le store, NI le système de notifications séparément.

// Convention de performance à grande échelle : budget de bundle surveillé en CI
// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // sépare les grosses dépendances stables du code applicatif (meilleur cache navigateur)
          'vendor-vue': ['vue', 'vue-router', 'pinia'],
          'vendor-ui': ['@vueuse/core'],
        },
      },
    },
    chunkSizeWarningLimit: 300, // avertit en CI si un chunk dépasse 300 Ko
  },
})