nuxt-toastflow 1.0.0 → 1.0.1

package/README.md

@@ -1,70 +1,86 @@
-![Toastflow showcase](../../images/banner.png)
-
-# nuxt-toastflow
-
-Nuxt module wrapper for `vue-toastflow` so Toastflow works out of the box in Nuxt.
-
-## Install
-
-```bash
-pnpm add nuxt-toastflow
-```
-
-## Usage
-
-```ts
-// nuxt.config.ts
-export default defineNuxtConfig({
-  modules: ["nuxt-toastflow"],
-  toastflow: {
-    config: {
-      position: "top-right",
-      duration: 5000,
-    },
-  },
-});
-```
-
-```vue
-<!-- app.vue -->
-<template>
-  <ToastContainer />
-  <NuxtPage />
-</template>
-```
-
-```vue
-
-<script setup lang="ts">
-  // Optional:
-  // const toast = useToast();
-
-  toast.success({
-    title: "Saved",
-    description: "Your changes are live.",
-  });
-</script>
-```
-
-## Options
-
-```ts
-type NuxtToastflowOptions = {
-  config: Partial<ToastConfig>;
-  css: boolean;
-  componentName: string | false;
-};
-```
-
-Defaults:
-
-- `config: {}`
-- `css: true`
-- `componentName: "ToastContainer"`
-
-`ToastContainer` is auto-registered as a client-only component by the module.
-You can use either auto-imported `toast` (Vue-like API) or `useToast()`.
-
-## License
-
-MIT
+<p align="center">
+  <img src="../../assets/banner.png" alt="Toastflow" width="100%" />
+</p>
+
+<h1 align="center">💚 nuxt-toastflow</h1>
+
+<p align="center">
+  <strong>Nuxt module for Toastflow</strong> — auto-imports, SSR support, and zero-config setup.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/nuxt-toastflow"><img src="https://img.shields.io/npm/v/nuxt-toastflow?color=00dc82&style=flat-square" alt="npm version" /></a>
+  <a href="https://www.npmjs.com/package/nuxt-toastflow"><img src="https://img.shields.io/npm/dm/nuxt-toastflow?style=flat-square" alt="npm downloads" /></a>
+  <a href="../../LICENSE"><img src="https://img.shields.io/github/license/adrianjanocko/toastflow?style=flat-square" alt="License" /></a>
+</p>
+
+<p align="center">
+  <a href="https://docs.toastflow.top/">📖 Docs</a> · <a href="https://toastflow.top/">🎮 Playground</a> · <a href="https://docs.toastflow.top/comparisons/overview">⚔️ Comparisons</a>
+</p>
+
+---
+
+## 🚀 Quick Start
+
+**1. Install**
+
+```bash
+pnpm add nuxt-toastflow
+```
+
+**2. Add the module**
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-toastflow"],
+  toastflow: {
+    config: {
+      position: "top-right",
+      duration: 5000,
+    },
+  },
+});
+```
+
+**3. Toast away 🎉**
+
+```vue
+<!-- 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!
+
+## ⚙️ 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 |
+
+<details>
+<summary>💡 <strong>How does it work under the hood?</strong></summary>
+
+<br />
+
+- `ToastContainer` is auto-registered as a **client-only** component
+- `toast` and `useToast()` are **auto-imported** — use either one
+- Styles are injected automatically unless `css: false`
+
+</details>
+
+## 📄 License
+
+[MIT](../../LICENSE) — made with ❤️ by [@adrianjanocko](https://github.com/adrianjanocko)

package/dist/module.d.mts

@@ -0,0 +1,20 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ToastConfig } from 'vue-toastflow';
+
+interface NuxtToastflowOptions {
+    /**
+     * Global Toastflow config passed to createToastflow.
+     */
+    config: Partial<ToastConfig>;
+    /**
+     * Automatically include Toastflow CSS.
+     */
+    css: boolean;
+    /**
+     * Auto-register ToastContainer under this name. Set false to disable.
+     */
+    componentName: string | false;
+}
+declare const _default: _nuxt_schema.NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
+
+export { type NuxtToastflowOptions, _default as default };

package/dist/module.d.ts

@@ -0,0 +1,20 @@
+import * as _nuxt_schema from '@nuxt/schema';
+import { ToastConfig } from 'vue-toastflow';
+
+interface NuxtToastflowOptions {
+    /**
+     * Global Toastflow config passed to createToastflow.
+     */
+    config: Partial<ToastConfig>;
+    /**
+     * Automatically include Toastflow CSS.
+     */
+    css: boolean;
+    /**
+     * Auto-register ToastContainer under this name. Set false to disable.
+     */
+    componentName: string | false;
+}
+declare const _default: _nuxt_schema.NuxtModule<NuxtToastflowOptions, NuxtToastflowOptions, false>;
+
+export { type NuxtToastflowOptions, _default as default };

package/dist/module.js

@@ -0,0 +1,176 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/module.ts
+var module_exports = {};
+__export(module_exports, {
+  default: () => module_default
+});
+module.exports = __toCommonJS(module_exports);
+var import_kit = require("@nuxt/kit");
+function containsFunction(value, visited = /* @__PURE__ */ new Set()) {
+  if (typeof value === "function") {
+    return true;
+  }
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+  if (visited.has(value)) {
+    return false;
+  }
+  visited.add(value);
+  if (Array.isArray(value)) {
+    return value.some(function(item) {
+      return containsFunction(item, visited);
+    });
+  }
+  const objectValues = Object.values(value);
+  return objectValues.some(function(item) {
+    return containsFunction(item, visited);
+  });
+}
+var module_default = (0, import_kit.defineNuxtModule)({
+  meta: {
+    name: "nuxt-toastflow",
+    configKey: "toastflow",
+    compatibility: {
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
+  },
+  defaults: {
+    config: {},
+    css: true,
+    componentName: "ToastContainer"
+  },
+  setup(options, nuxt) {
+    if (containsFunction(options.config)) {
+      console.warn(
+        "[nuxt-toastflow] Functions in `toastflow.config` are not serializable in nuxt.config and will be omitted."
+      );
+    }
+    let serializedConfig = "{}";
+    try {
+      serializedConfig = JSON.stringify(options.config ?? {}, null, 2) ?? "{}";
+    } catch {
+      throw new Error(
+        "[nuxt-toastflow] `toastflow.config` must be JSON-serializable."
+      );
+    }
+    (0, import_kit.addPluginTemplate)({
+      filename: "toastflow.mjs",
+      mode: "client",
+      getContents: function() {
+        return [
+          'import { createToastflow, toast } from "vue-toastflow";',
+          "",
+          "export default defineNuxtPlugin((nuxtApp) => {",
+          `  nuxtApp.vueApp.use(createToastflow(${serializedConfig}));`,
+          "",
+          "  return {",
+          "    provide: {",
+          "      toast,",
+          "    },",
+          "  };",
+          "});",
+          ""
+        ].join("\n");
+      }
+    });
+    const toastTemplate = (0, import_kit.addTemplate)({
+      filename: "toastflow/toast.ts",
+      getContents: function() {
+        return [
+          'import { useNuxtApp } from "#app";',
+          "",
+          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          "",
+          "export function useToast(): ToastApi {",
+          "  return useNuxtApp().$toast;",
+          "}",
+          "",
+          "export const toast: ToastApi = new Proxy({} as ToastApi, {",
+          "  get(_target, key) {",
+          "    const currentToast = useNuxtApp().$toast as Record<PropertyKey, unknown>;",
+          "    const value = currentToast[key];",
+          '    if (typeof value === "function") {',
+          "      return (value as (...args: unknown[]) => unknown).bind(currentToast);",
+          "    }",
+          "    return value;",
+          "  },",
+          "});",
+          ""
+        ].join("\n");
+      }
+    });
+    (0, import_kit.addImports)({
+      name: "useToast",
+      from: toastTemplate.dst
+    });
+    (0, import_kit.addImports)({
+      name: "toast",
+      from: toastTemplate.dst
+    });
+    (0, import_kit.addTypeTemplate)({
+      filename: "types/nuxt-toastflow.d.ts",
+      getContents: function() {
+        return [
+          'type ToastApi = typeof import("vue-toastflow")["toast"];',
+          "",
+          'declare module "#app" {',
+          "  interface NuxtApp {",
+          "    $toast: ToastApi;",
+          "  }",
+          "}",
+          "",
+          'declare module "vue" {',
+          "  interface ComponentCustomProperties {",
+          "    $toast: ToastApi;",
+          "  }",
+          "}",
+          "",
+          "export {};",
+          ""
+        ].join("\n");
+      }
+    });
+    if (options.componentName) {
+      (0, import_kit.addComponent)({
+        name: options.componentName,
+        export: "ToastContainer",
+        filePath: "vue-toastflow",
+        mode: "client"
+      });
+    }
+    if (options.css) {
+      const cssEntry = "vue-toastflow/styles.css";
+      const hasCssEntry = nuxt.options.css.some(function(entry) {
+        if (typeof entry === "string") {
+          return entry === cssEntry;
+        }
+        if (Array.isArray(entry) && typeof entry[0] === "string") {
+          return entry[0] === cssEntry;
+        }
+        return false;
+      });
+      if (!hasCssEntry) {
+        nuxt.options.css.push(cssEntry);
+      }
+    }
+  }
+});

package/dist/module.json

@@ -0,0 +1,12 @@
+{
+  "name": "nuxt-toastflow",
+  "configKey": "toastflow",
+  "compatibility": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "version": "1.0.0",
+  "builder": {
+    "@nuxt/module-builder": "1.0.2",
+    "unbuild": "unknown"
+  }
+}

package/{src/module.ts → dist/module.mjs}

@@ -1,91 +1,64 @@
-import type { ToastConfig } from "vue-toastflow";
+// src/module.ts
 import {
   addComponent,
   addImports,
   addPluginTemplate,
   addTemplate,
   addTypeTemplate,
-  defineNuxtModule,
+  defineNuxtModule
 } from "@nuxt/kit";
-
-export interface NuxtToastflowOptions {
-  /**
-   * Global Toastflow config passed to createToastflow.
-   */
-  config: Partial<ToastConfig>;
-  /**
-   * Automatically include Toastflow CSS.
-   */
-  css: boolean;
-  /**
-   * Auto-register ToastContainer under this name. Set false to disable.
-   */
-  componentName: string | false;
-}
-
-function containsFunction(
-  value: unknown,
-  visited: Set<unknown> = new Set(),
-): boolean {
+function containsFunction(value, visited = /* @__PURE__ */ new Set()) {
   if (typeof value === "function") {
     return true;
   }
-
   if (!value || typeof value !== "object") {
     return false;
   }
-
   if (visited.has(value)) {
     return false;
   }
   visited.add(value);
-
   if (Array.isArray(value)) {
-    return value.some(function (item: unknown): boolean {
+    return value.some(function(item) {
       return containsFunction(item, visited);
     });
   }
-
-  const objectValues = Object.values(value as Record<string, unknown>);
-
-  return objectValues.some(function (item: unknown): boolean {
+  const objectValues = Object.values(value);
+  return objectValues.some(function(item) {
     return containsFunction(item, visited);
   });
 }
-
-export default defineNuxtModule<NuxtToastflowOptions>({
+var module_default = defineNuxtModule({
   meta: {
     name: "nuxt-toastflow",
     configKey: "toastflow",
     compatibility: {
-      nuxt: "^3.0.0 || ^4.0.0",
-    },
+      nuxt: "^3.0.0 || ^4.0.0"
+    }
   },
   defaults: {
     config: {},
     css: true,
-    componentName: "ToastContainer",
+    componentName: "ToastContainer"
   },
   setup(options, nuxt) {
     if (containsFunction(options.config)) {
       console.warn(
-        "[nuxt-toastflow] Functions in `toastflow.config` are not serializable in nuxt.config and will be omitted.",
+        "[nuxt-toastflow] Functions in `toastflow.config` are not serializable in nuxt.config and will be omitted."
       );
     }
-
     let serializedConfig = "{}";
     try {
       serializedConfig = JSON.stringify(options.config ?? {}, null, 2) ?? "{}";
     } catch {
       throw new Error(
-        "[nuxt-toastflow] `toastflow.config` must be JSON-serializable.",
+        "[nuxt-toastflow] `toastflow.config` must be JSON-serializable."
       );
     }
-
     addPluginTemplate({
       filename: "toastflow.mjs",
       mode: "client",
-      getContents: function () {
+      getContents: function() {
         return [
           'import { createToastflow, toast } from "vue-toastflow";',
           "",
@@ -98,14 +71,13 @@ export default defineNuxtModule<NuxtToastflowOptions>({
           "    },",
           "  };",
           "});",
-          "",
+          ""
         ].join("\n");
-      },
+      }
     });
-
     const toastTemplate = addTemplate({
       filename: "toastflow/toast.ts",
-      getContents: function () {
+      getContents: function() {
         return [
           'import { useNuxtApp } from "#app";',
           "",
@@ -119,30 +91,27 @@ export default defineNuxtModule<NuxtToastflowOptions>({
           "  get(_target, key) {",
           "    const currentToast = useNuxtApp().$toast as Record<PropertyKey, unknown>;",
           "    const value = currentToast[key];",
-          "    if (typeof value === \"function\") {",
+          '    if (typeof value === "function") {',
           "      return (value as (...args: unknown[]) => unknown).bind(currentToast);",
           "    }",
           "    return value;",
           "  },",
           "});",
-          "",
+          ""
         ].join("\n");
-      },
+      }
     });
-
     addImports({
       name: "useToast",
-      from: toastTemplate.dst,
+      from: toastTemplate.dst
     });
-
     addImports({
       name: "toast",
-      from: toastTemplate.dst,
+      from: toastTemplate.dst
     });
-
     addTypeTemplate({
       filename: "types/nuxt-toastflow.d.ts",
-      getContents: function () {
+      getContents: function() {
         return [
           'type ToastApi = typeof import("vue-toastflow")["toast"];',
           "",
@@ -159,37 +128,35 @@ export default defineNuxtModule<NuxtToastflowOptions>({
           "}",
           "",
           "export {};",
-          "",
+          ""
         ].join("\n");
-      },
+      }
     });
-
     if (options.componentName) {
       addComponent({
         name: options.componentName,
         export: "ToastContainer",
         filePath: "vue-toastflow",
-        mode: "client",
+        mode: "client"
       });
     }
-
     if (options.css) {
-      const cssEntry = "vue-toastflow/src/styles.css";
-      const hasCssEntry = nuxt.options.css.some(function (entry) {
+      const cssEntry = "vue-toastflow/styles.css";
+      const hasCssEntry = nuxt.options.css.some(function(entry) {
         if (typeof entry === "string") {
           return entry === cssEntry;
         }
-
         if (Array.isArray(entry) && typeof entry[0] === "string") {
           return entry[0] === cssEntry;
         }
-
         return false;
       });
-
       if (!hasCssEntry) {
         nuxt.options.css.push(cssEntry);
       }
     }
-  },
+  }
 });
+export {
+  module_default as default
+};

package/dist/runtime/composables/toast.d.ts

@@ -0,0 +1,4 @@
+type ToastApi = typeof import("vue-toastflow")["toast"];
+export declare function useToast(): ToastApi;
+export declare const toast: ToastApi;
+export {};

package/dist/runtime/composables/toast.js

@@ -0,0 +1,14 @@
+import { useNuxtApp } from "#app";
+export function useToast() {
+  return useNuxtApp().$toast;
+}
+export const toast = new Proxy({}, {
+  get(_target, key) {
+    const currentToast = useNuxtApp().$toast;
+    const value = currentToast[key];
+    if (typeof value === "function") {
+      return value.bind(currentToast);
+    }
+    return value;
+  }
+});

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.js

@@ -0,0 +1,11 @@
+import { createToastflow, toast } from "vue-toastflow";
+export default defineNuxtPlugin((nuxtApp) => {
+  const runtimeConfig = useRuntimeConfig();
+  const toastflowConfig = runtimeConfig.public.__nuxtToastflow ?? {};
+  nuxtApp.vueApp.use(createToastflow(toastflowConfig));
+  return {
+    provide: {
+      toast
+    }
+  };
+});

package/dist/types.d.mts

@@ -0,0 +1,9 @@
+import type { ModulePublicRuntimeConfig } from './module.mjs'
+
+declare module '@nuxt/schema' {
+  interface PublicRuntimeConfig extends ModulePublicRuntimeConfig {}
+}
+
+export { default } from './module.mjs'
+
+export { type ModuleOptions, type ModulePublicRuntimeConfig, type NuxtToastflowOptions } from './module.mjs'

package/package.json

@@ -1,13 +1,18 @@
 {
   "name": "nuxt-toastflow",
   "author": "adrianjanocko",
-  "description": "Nuxt wrapper module for vue-toastflow.",
+  "description": "Nuxt module for Toastflow — accessible, customizable toast notifications with auto-imports, SSR support, and CSS-first theming.",
   "keywords": [
     "nuxt",
+    "nuxt-module",
     "toast",
     "toastflow",
+    "notifications",
     "notification",
-    "vue"
+    "toast-notifications",
+    "toaster",
+    "vue",
+    "typescript"
   ],
   "license": "MIT",
   "homepage": "https://toastflow.top/",
@@ -16,22 +21,32 @@
     "url": "https://github.com/adrianjanocko/toastflow.git",
     "directory": "packages/nuxt"
   },
-  "version": "1.0.0",
-  "main": "src/module.ts",
-  "module": "src/module.ts",
-  "types": "src/module.ts",
+  "version": "1.0.1",
+  "main": "./dist/module.js",
+  "module": "./dist/module.mjs",
+  "types": "./dist/module.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/module.d.mts",
+        "default": "./dist/module.mjs"
+      },
+      "require": {
+        "types": "./dist/module.d.ts",
+        "default": "./dist/module.js"
+      }
+    }
+  },
   "files": [
-    "README.md",
-    "package.json",
-    "tsconfig.json",
-    "src"
+    "dist",
+    "README.md"
   ],
   "peerDependencies": {
     "nuxt": "^3.0.0 || ^4.0.0"
   },
   "dependencies": {
     "@nuxt/kit": "^3.17.5",
-    "vue-toastflow": "^1.1.8"
+    "vue-toastflow": "^1.1.9"
   },
   "devDependencies": {
     "tsup": "^8.5.1",

package/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.base.json",
-  "include": ["src"]
-}