Recettes par framework

$debug est une globale. L'appel est identique dans tous les frameworks : pas d'adaptateur, pas d'import, pas d'API spécifique. Seul l'endroit où vous enregistrez le plugin change :

Pile technique	Où placer mtDebug()
Vue / React / Svelte	plugins: [] dans vite.config.ts
Nuxt 4	vite: { plugins: [] } dans nuxt.config.ts (voir ci-dessous)
Angular via Analog	plugins: [] dans vite.config.ts, à côté de analog()
SvelteKit	plugins: [] dans vite.config.ts, à côté de sveltekit()

// nuxt.config.ts — la seule config qui n'est pas vite.config.ts
import mtDebug from "@mars-tech/vite-debug-plugin";

export default defineNuxtConfig({
  vite: { plugins: [mtDebug()] },
});

Quelle que soit la pile technique, enregistrez-le sans condition dans cette liste de premier niveau : pendant vite build, c'est le plugin qui supprime les appels à $debug. Voir Installer et enregistrer le plugin.

Un site d'appel idiomatique

Partout où un framework offre un point d'accroche sans bon endroit pour un console.log, $debug trouve sa place. Voici un validateur de propriétés de composant Vue, qui s'exécute avant le rendu du composant :

<script setup lang="ts">
defineProps({
  variant: {
    type: String,
    required: true,
    validator(value: string) {
      const ok = ["primary", "secondary", "ghost"].includes(value);
      if (!ok) {
        $debug("warning", new Error(`Variante invalide "${value}"`), {
          tag: "PropsValidator",
          showSource: true,
        });
      }
      return ok;
    },
  },
});
</script>

Actions de store, gardes de route, reducers et middlewares prennent exactement le même appel. Voir Espaces de noms et filtrage à l'exécution pour les garder séparables quand ils se multiplient, et Rendu côté serveur (SSR) pour les appels exécutés côté serveur.