nuxt-toastflow 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Adrián Janočko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+![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

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "nuxt-toastflow",
+  "author": "adrianjanocko",
+  "description": "Nuxt wrapper module for vue-toastflow.",
+  "keywords": [
+    "nuxt",
+    "toast",
+    "toastflow",
+    "notification",
+    "vue"
+  ],
+  "license": "MIT",
+  "homepage": "https://toastflow.top/",
+  "repository": {
+    "type": "git",
+    "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",
+  "files": [
+    "README.md",
+    "package.json",
+    "tsconfig.json",
+    "src"
+  ],
+  "peerDependencies": {
+    "nuxt": "^3.0.0 || ^4.0.0"
+  },
+  "dependencies": {
+    "@nuxt/kit": "^3.17.5",
+    "vue-toastflow": "^1.1.8"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsup src/module.ts --format cjs,esm --dts"
+  }
+}

package/src/module.ts

@@ -0,0 +1,195 @@
+import type { ToastConfig } from "vue-toastflow";
+import {
+  addComponent,
+  addImports,
+  addPluginTemplate,
+  addTemplate,
+  addTypeTemplate,
+  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 {
+  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 containsFunction(item, visited);
+    });
+  }
+
+  const objectValues = Object.values(value as Record<string, unknown>);
+
+  return objectValues.some(function (item: unknown): boolean {
+    return containsFunction(item, visited);
+  });
+}
+
+export default defineNuxtModule<NuxtToastflowOptions>({
+  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.",
+      );
+    }
+
+    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 = 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");
+      },
+    });
+
+    addImports({
+      name: "useToast",
+      from: toastTemplate.dst,
+    });
+
+    addImports({
+      name: "toast",
+      from: toastTemplate.dst,
+    });
+
+    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) {
+      addComponent({
+        name: options.componentName,
+        export: "ToastContainer",
+        filePath: "vue-toastflow",
+        mode: "client",
+      });
+    }
+
+    if (options.css) {
+      const cssEntry = "vue-toastflow/src/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/tsconfig.json

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