Framework recipes

Snippets below show the relevant call sites only — drop them into any Vite-based project after wiring mtDebug() in vite.config.ts (see Usage).

Vue 3 — Composition API (props validator)

<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(`Invalid variant "${value}"`), {
          tag: "PropsValidator",
          showSource: true,
        });
      }
      return ok;
    },
  },
});
</script>

React — Redux Toolkit slice

import { createSlice } from "@reduxjs/toolkit";

const counterSlice = createSlice({
  name: "counter",
  initialState: { count: 0 },
  reducers: {
    increment(state) {
      state.count++;
      $debug("info", `counter incremented to ${state.count}`, {
        tag: "store/counter",
      });
    },
    reset(state) {
      $debug("warning", "counter reset", { tag: "store/counter" });
      state.count = 0;
    },
  },
});

Angular (Analog) — NgRx reducer

import { createReducer, on } from "@ngrx/store";

export const counterReducer = createReducer(
  { count: 0 },
  on(increment, (state) => {
    const next = state.count + 1;
    $debug("info", `counter incremented to ${next}`, { tag: "store/counter" });
    return { ...state, count: next };
  }),
);

Nuxt 4 — Pinia store

// app/stores/counter.ts
import { defineStore } from "pinia";

export const useCounterStore = defineStore("counter", {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
      $debug("info", `counter incremented to ${this.count}`, {
        tag: "store/counter",
      });
    },
  },
});

// nuxt.config.ts
import mtDebug from "@mars-tech/vite-debug-plugin";

export default defineNuxtConfig({
  modules: ["@pinia/nuxt"],
  vite: { plugins: [mtDebug()] },
});