Guides
Start typing to search…

Plugins

Système de Plugins Nuxt 3

Cette documentation présente le système de plugins de l'application Nuxt 3, expliquant leur rôle, leur fonctionnement, et leur utilisation pour l'initialisation et la configuration de l'application.

Vue d'Ensemble du Système de Plugins

Les plugins Nuxt 3 sont des fonctions qui s'exécutent automatiquement lors de l'initialisation de l'application, permettant d'étendre les fonctionnalités, configurer des bibliothèques tierces, et initialiser l'état global de l'application.

graph TB
    subgraph "Cycle de Vie Nuxt"
        AppStart[Démarrage App]
        PluginLoad[Chargement Plugins]
        AppReady[App Prête]
    end

    subgraph "Types de Plugins"
        ClientOnly[Client-only]
        ServerOnly[Server-only]
        Universal[Universal]
    end

    subgraph "Plugins de l'Application"
        DjustUser[djust-user.ts]
        DjustCart[djust-cart.ts]
        DjustBuying[djust-buyingList.ts]
        DjustQuote[djust-quote.ts]
        SentryClient[sentry.client.ts]
    end

    subgraph "Initialisation"
        UserAuth[Authentification]
        DataLoad[Chargement Données]
        StoreInit[Init Stores]
        Monitoring[Monitoring]
    end

    AppStart --> PluginLoad
    PluginLoad --> AppReady

    ClientOnly --> DjustUser
    ClientOnly --> DjustCart
    ClientOnly --> DjustBuying
    ClientOnly --> DjustQuote
    ClientOnly --> SentryClient

    DjustUser --> UserAuth
    DjustCart --> DataLoad
    DjustBuying --> DataLoad
    DjustQuote --> DataLoad
    SentryClient --> Monitoring

    UserAuth --> StoreInit
    DataLoad --> StoreInit
    StoreInit --> AppReady

    style AppStart fill:#e1f5fe
    style PluginLoad fill:#f3e5f5
    style DjustUser fill:#e8f5e8
    style UserAuth fill:#fff3e0

Configuration des Plugins

Enregistrement dans nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  // Plugins enregistrés manuellement
  plugins: [
    "~/plugins/djust-user.ts", // Initialisation utilisateur
    "~/plugins/djust-cart.ts", // Initialisation panier
    "~/plugins/djust-buyingList.ts", // Initialisation listes d'achat
  ],

  // Note: Les plugins avec suffixes spéciaux sont auto-détectés
  // - .client.ts = Client seulement
  // - .server.ts = Serveur seulement
  // - .ts = Universal (client + serveur)
});

Auto-découverte des Plugins

Nuxt 3 découvre automatiquement les plugins dans le dossier plugins/ selon leurs noms :

plugins/
├── djust-user.ts           # Universal (client + serveur)
├── djust-cart.ts           # Universal (client + serveur)
├── djust-buyingList.ts     # Universal (client + serveur)
├── djust-quote.ts          # Universal (client + serveur)
└── sentry.client.ts        # Client seulement

Plugins de l'Application

1. djust-user.ts - Gestion de l'Authentification

Rôle : Initialise l'état utilisateur et restaure la session au démarrage de l'application.

Fonctionnalités :

  • ✅ Restauration de session depuis les cookies
  • ✅ Chargement des données utilisateur si authentifié
  • ✅ Configuration du compte client actuel
  • ✅ Gestion d'erreurs gracieuse
  • ✅ Exécution côté client uniquement

2. djust-cart.ts - Initialisation du Panier

Rôle : Charge ou crée le panier de l'utilisateur au démarrage de l'application.

Fonctionnalités :

  • ✅ Récupération ou création du panier actif
  • ✅ Filtrage par statut (INIT, LOADING, ON_GOING)
  • ✅ Pagination configurée (10 éléments par page)
  • ✅ Devise par défaut (EUR)
  • ✅ Exécution conditionnelle si authentifié

3. djust-buyingList.ts - Initialisation des Listes d'Achat

Rôle : Charge les listes d'achat (favoris) de l'utilisateur au démarrage.

Fonctionnalités :

  • ✅ Chargement des listes de favoris complètes
  • ✅ Pagination étendue (999 éléments pour tout récupérer)
  • ✅ Filtrage par statut actif
  • ✅ Mise à jour du store automatique

4. djust-quote.ts - Initialisation des Devis

Rôle : Charge les devis de l'utilisateur au démarrage de l'application.

Fonctionnalités :

  • ✅ Récupération des devis maîtres du compte client
  • ✅ Pagination complète pour tous les devis
  • ✅ Filtrage par compte client actuel
  • ✅ Gestion d'erreurs robuste

5. sentry.client.ts - Monitoring et Observabilité

Rôle : Configure Sentry pour le monitoring d'erreurs côté client.

Fonctionnalités :

  • ✅ Monitoring d'erreurs automatique
  • ✅ Tracing de performance avec le routeur
  • ✅ Session replay pour le debugging
  • ✅ Configuration par environnement
  • ✅ Intégration Vue 3 native

Types de Plugins

1. Plugins Client-Only

Les plugins avec le suffixe .client.ts s'exécutent uniquement côté client :

// plugins/exemple.client.ts
export default defineNuxtPlugin(() => {
  // Ce code ne s'exécute QUE dans le navigateur
  if (process.server) return; // Sécurité supplémentaire

  // Initialisation côté client
  console.log("Running on client");
});

Cas d'usage :

  • Configuration de bibliothèques browser-only
  • Initialisation d'événements DOM
  • Services de monitoring client
  • Web APIs (localStorage, geolocation, etc.)

2. Plugins Server-Only

Les plugins avec le suffixe .server.ts s'exécutent uniquement côté serveur :

// plugins/exemple.server.ts
export default defineNuxtPlugin(() => {
  // Ce code ne s'exécute QUE sur le serveur
  console.log("Running on server");
});

Cas d'usage :

  • Configuration de bases de données
  • Services de logging serveur
  • Intégrations API serveur
  • Configuration SSR spécifique

3. Plugins Universal

Les plugins sans suffixe s'exécutent côté client ET serveur :

// plugins/exemple.ts
export default defineNuxtPlugin(() => {
  // Ce code s'exécute partout
  console.log("Running on:", process.server ? "server" : "client");
});

Cas d'usage :

  • Configuration partagée
  • Services isomorphes
  • Initialisation d'état global
  • Utilitaires universels

Ordre d'Exécution des Plugins

1. Ordre par Configuration

Les plugins enregistrés dans nuxt.config.ts s'exécutent dans l'ordre défini :

// nuxt.config.ts
plugins: [
  '~/plugins/djust-user.ts',        // 1er - Authentification
  '~/plugins/djust-cart.ts',        // 2ème - Panier
  '~/plugins/djust-buyingList.ts',  // 3ème - Listes d'achat
],

2. Ordre par Auto-découverte

Les plugins auto-découverts s'exécutent par ordre alphabétique :

plugins/
├── djust-buyingList.ts     # 1er (alphabétique)
├── djust-cart.ts           # 2ème
├── djust-quote.ts          # 3ème
├── djust-user.ts           # 4ème
└── sentry.client.ts        # 5ème

3. Dépendances entre Plugins

sequenceDiagram
    participant App as Application
    participant User as djust-user.ts
    participant Cart as djust-cart.ts
    participant Buying as djust-buyingList.ts
    participant Quote as djust-quote.ts
    participant Sentry as sentry.client.ts

    App->>User: 1. Initialise authentification
    User->>User: Charge données utilisateur
    User-->>App: Utilisateur prêt

    App->>Cart: 2. Initialise panier
    Cart->>Cart: Charge/crée panier
    Cart-->>App: Panier prêt

    App->>Buying: 3. Initialise listes d'achat
    Buying->>Buying: Charge favoris
    Buying-->>App: Listes prêtes

    App->>Quote: 4. Initialise devis
    Quote->>Quote: Charge devis
    Quote-->>App: Devis prêts

    App->>Sentry: 5. Initialise monitoring
    Sentry->>Sentry: Configure Sentry
    Sentry-->>App: Monitoring actif

    Note over App: Application entièrement initialisée

Les plugins Nuxt 3 constituent la fondation de l'application, garantissant que toutes les données essentielles sont chargées et que tous les services sont configurés avant que l'utilisateur interagisse avec l'interface. Cette approche assure une expérience utilisateur fluide et une architecture robuste pour l'ensemble de l'application.

Updated about 2 months ago