🍞 Vue Feedback Kit

A lightweight and customizable toast + confirm system for Vue 3.

• 📘 Written in TypeScript
• ⚡ Works with or without plugin
• 🎨 Optional dark mode + theme overrides
• 🧩 Easy integration with any theme system (Vuetify, Tailwind, custom)
• 🔧 Fully reactive composables (useToast, useConfirm)
• 🪶 Zero dependencies

📦 Installation

npm install @jtekt/vue-feedback-kit
# or
yarn add @jtekt/vue-feedback-kit

🚀 Usage Modes

This library works in two flexible ways, depending on your setup.

🧩 Option 1: Plugin Mode (Recommended)

Setup once globally:

import { createApp } from "vue";
import App from "./App.vue";
import { createUI } from "@jtekt/vue-feedback-kit";

const app = createApp(App);
app.use(createUI); // enables global toast + confirm
app.mount("#app");

Then include components once:

<template>
  <Toaster />
  <ConfirmDialog />
  <RouterView />
</template>

<script setup lang="ts">
import { Toaster, ConfirmDialog } from "@jtekt/vue-feedback-kit";
</script>

Passing a global theme (static)

app.use(createUI, {
  theme: {
    dark: false,
    colors: {
      success: "#4CAF50",
      error: "#E53935",
      primary: "#1867C0",
    },
  },
});

Passing a global theme (reactive — recommended)

You can pass a function that returns a theme object:

app.use(createUI, {
  theme: () => ({
    dark: isDark.value,
    colors: myPalette.value,
  }),
});

✔ Fully reactive
✔ No watchers needed
✔ Perfect for Vuetify or any dynamic theme system

⭐ Vuetify Integration (Plugin Mode)

app.use(createUI, {
  theme: () => ({
    dark: vuetify.theme.global.current.value.dark,
    colors: vuetify.theme.current.value.colors,
  }),
});

✔ Automatically reacts when user changes theme
✔ No syncing
✔ No watchers
✔ Your library stays Vuetify‑agnostic

🪄 Option 2: Component Mode (No Plugin)

<template>
  <Toaster />
  <ConfirmDialog />
</template>

<script setup lang="ts">
import { Toaster, ConfirmDialog } from "@jtekt/vue-feedback-kit";
</script>

Manual theme (e.g. using Vuetify inside a component)

<script setup lang="ts">
import { useTheme } from "vuetify";
const theme = useTheme();
const vuetifyTheme = theme.current.value.colors;
</script>

<template>
  <Toaster :theme="{ colors: vuetifyTheme }" />
  <ConfirmDialog :theme="{ colors: vuetifyTheme }" />
</template>

🧪 Usage Examples

Toasts

import { useToast } from "@jtekt/vue-feedback-kit";

const toast = useToast();

toast.success("Saved successfully!");
toast.error("Something went wrong");
toast.loading("Processing...");
toast.dismiss(); // dismiss all or a specific toast

Confirm Dialog

import { useConfirm } from "@jtekt/vue-feedback-kit";

const confirm = useConfirm();
const ok = await confirm("Delete this item?");

✔ With options

const ok = await confirm("Delete this item?", {
  color: "error",
  confirmText: "Yes, delete",
  cancelText: "Cancel",
});

🎨 Theming

Both <Toaster /> and <ConfirmDialog /> accept:

theme?: {
  dark?: boolean;
  colors?: Record<string, unknown>;
}

Custom success color

<Toaster :theme="{ colors: { success: '#00ff00' } }" />

Dark mode override

<ConfirmDialog :theme="{ dark: true }" />

Using Vuetify palette (component mode)

<Toaster :theme="{ colors: vuetifyTheme }" />

Global theme using plugin (static)

app.use(createUI, {
  theme: {
    dark: true,
    colors: vuetifyTheme,
  },
});

Global theme using plugin (reactive — recommended)

app.use(createUI, {
  theme: () => ({
    dark: vuetify.theme.global.current.value.dark,
    colors: vuetify.theme.current.value.colors,
  }),
});

✔ Best experience
✔ No watchers
✔ Perfectly reactive
✔ Works with any design system

📚 API

useToast()

• toast(message, options?)
• success(message, options?)
• error(message, options?)
• warning(message, options?)
• info(message, options?)
• loading(message, options?)
• dismiss(id?)

useConfirm()

Overloads

confirm("text"): Promise<boolean>
confirm("text", options): Promise<boolean>
confirm(options): Promise<boolean>

Example

const ok = await confirm("Delete?", { color: "error" });

🧱 Dependencies

• Vue ^3.3.0

✨ Enjoy using Vue Feedback Kit!