🚀 Quick Start

1. Install

pnpm add nuxt-toastflow

2. Add the module

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-toastflow"],
  toastflow: {
    config: {
      position: "top-right",
      duration: 5000,
    },
  },
});

3. Toast away 🎉

<!-- app.vue -->
<script setup lang="ts">
toast.success({
  title: "Saved",
  description: "Your changes are live.",
});
</script>

<template>
  <ToastContainer />
  <NuxtPage />
</template>

💡 Both toast and useToast() are auto-imported — no manual imports needed!

If you need the lower-level Vue runtime pieces directly, import them from nuxt-toastflow/runtime:

import {
  Toast,
  ToastProgress,
  ToastContainer,
  toast,
} from "nuxt-toastflow/runtime";

⚙️ Module Options

| Option | Type | Default | Description | | :----------------- | :--------------------- | :----------------: | :----------------------------------------- | | 🛠️ config | Partial<ToastConfig> | {} | Toast configuration passed to the plugin | | 🎨 css | boolean | true | Include default styles | | 🧱 componentName | string \| false | "ToastContainer" | Auto-registered client-only component name |

• ToastContainer is auto-registered as a client-only component
• toast and useToast() are auto-imported — use either one
• vue-toastflow is added to the transpile list so internal components resolve correctly
• Styles are injected automatically unless css: false
• The module forwards css to createToastflow(..., { css }), so it uses the same CSS toggle as vue-toastflow
• When you disable CSS and still want the shipped stylesheet manually, import nuxt-toastflow/styles.css

📄 License

MIT — made with ❤️ by @adrianjanocko