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

fluix.success({
  title: "Saved!",
  description: "Your changes have been saved.",
  duration: 5000,
  theme: "dark",
  roundness: 20,
  fill: "#1a1a2e",
  icon: "✨",
});

Promise Support

fluix.promise(
  fetch("/api/data").then((r) => r.json()),
  {
    loading: { title: "Loading..." },
    success: (data) => ({
      title: "Done!",
      description: `Loaded ${data.length} items`,
    }),
    error: (err) => ({
      title: "Failed",
      description: err.message,
    }),
  }
);

Action Button

fluix.action({
  title: "Item deleted",
  button: {
    title: "Undo",
    onClick: () => fluix.success({ title: "Restored!" }),
  },
});

Layout Modes

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

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