Toast — Vue

Installation

npm install @fluix-ui/vue @fluix-ui/css

Basic Usage

<script setup>
import { Toaster, fluix } from "@fluix-ui/vue";
import "@fluix-ui/css";
</script>

<template>
  <Toaster position="top-right" />
  <button @click="fluix.success({ title: 'Saved!' })">
    Save
  </button>
</template>

Add <Toaster /> once in your app layout. Then call fluix.success(), fluix.error(), etc. from anywhere.

Toaster Component

<Toaster
  position="top-right"
  :config="{
    layout: 'stack',
    offset: 24,
    defaults: {
      theme: 'dark',
      duration: 6000,
    },
  }"
/>

Props

Prop	Type	Default	Description
`position`	`FluixPosition`	`"top-right"`	Default viewport position
`config`	`FluixToasterConfig`	—	Full configuration object

Toast Options

Call fluix.success() from Composition API setup functions, methods, Pinia actions, or any JavaScript context. Since fluix is a plain singleton, no inject/provide is needed:

<script setup>
import { fluix } from "@fluix-ui/vue";

async function handleSave() {
  await saveSettings();
  fluix.success({
    title: "Settings saved",
    description: "Your preferences have been updated.",
    duration: 5000,
    theme: "dark",
    roundness: 20,
    icon: "✨",
  });
}
</script>

<template>
  <button @click="handleSave">Save</button>
</template>

The theme option accepts any string — "light", "dark", or a custom name you define in CSS. See Theming for details.

Promise Support

Wrap any Promise to show a loading toast that transitions to success or error. Works well inside Pinia actions, Vue Router guards, or Axios interceptors:

<script setup>
import { fluix } from "@fluix-ui/vue";

function loadUsers() {
  fluix.promise(
    fetch("/api/users").then((r) => r.json()),
    {
      loading: { title: "Loading users..." },
      success: (users) => ({
        title: "Users loaded",
        description: `Found ${users.length} users`,
      }),
      error: (err) => ({
        title: "Failed to load",
        description: err.message,
      }),
    }
  );
}
</script>

<template>
  <button @click="loadUsers">Refresh</button>
</template>

Action Button

Show a toast with an undo action — useful after destructive operations. Works naturally with Vue’s event handling:

<script setup>
import { fluix } from "@fluix-ui/vue";

function handleDelete(item) {
  deleteItem(item.id);
  fluix.action({
    title: "Item deleted",
    description: `"${item.name}" has been removed.`,
    button: {
      title: "Undo",
      onClick: () => {
        restoreItem(item.id);
        fluix.success({ title: "Restored!" });
      },
    },
  });
}
</script>

<template>
  <button @click="handleDelete(item)">Delete</button>
</template>

Layout Modes

<!-- Stack: vertical list -->
<Toaster :config="{ layout: 'stack' }" />

<!-- Notch: compact island -->
<Toaster :config="{ layout: 'notch' }" />

How It Works in Vue

The Vue adapter uses watchEffect to subscribe to the Fluix core store and trigger reactivity updates. The <Toaster /> is a standard Vue component you can place in your App.vue or any layout component.

Since fluix is a plain JavaScript singleton, you can call it from Composition API setup functions, Pinia actions, router guards, or Axios interceptors — anywhere in your Vue app without needing inject/provide.

The description field accepts plain strings or HTML strings. For rich content, pass an HTML string and Fluix will render it safely inside the toast body.