├── .husky └── commit-msg ├── .npmrc ├── playground ├── tsconfig.json ├── server │ └── tsconfig.json ├── nuxt.config.ts ├── package.json └── app.vue ├── .vscode └── settings.json ├── commitlint.config.ts ├── .github ├── FUNDING.yml ├── renovate.json └── workflows │ └── ci.yml ├── assets └── cover.png ├── src ├── runtime │ ├── server │ │ └── tsconfig.json │ ├── types │ │ └── IziToast.ts │ ├── composables │ │ └── useToast.ts │ └── plugin.ts └── module.ts ├── test ├── fixtures │ └── basic │ │ ├── package.json │ │ ├── nuxt.config.ts │ │ └── app.vue └── basic.test.ts ├── tsconfig.json ├── vitest.config.ts ├── .editorconfig ├── eslint.config.mjs ├── .gitignore ├── package.json ├── CHANGELOG.md └── README.md /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | npm run commitlint "${1}" 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | shamefully-hoist=true 2 | strict-peer-dependencies=false 3 | -------------------------------------------------------------------------------- /playground/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "eslint.experimental.useFlatConfig": true 3 | } 4 | -------------------------------------------------------------------------------- /commitlint.config.ts: -------------------------------------------------------------------------------- 1 | export default { extends: ['@commitlint/config-conventional'] } 2 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: stephenjason89 2 | custom: https://paypal.me/stephenjason 3 | -------------------------------------------------------------------------------- /assets/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stephenjason89/nuxt-toast/HEAD/assets/cover.png -------------------------------------------------------------------------------- /playground/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /src/runtime/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../.nuxt/tsconfig.server.json", 3 | } 4 | -------------------------------------------------------------------------------- /test/fixtures/basic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "basic", 4 | "type": "module" 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.nuxt/tsconfig.json", 3 | "exclude": [ 4 | "dist", 5 | "node_modules", 6 | "playground", 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /test/fixtures/basic/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import MyModule from '../../../src/module' 2 | 3 | export default defineNuxtConfig({ 4 | modules: [ 5 | MyModule, 6 | ], 7 | }) 8 | -------------------------------------------------------------------------------- /test/fixtures/basic/app.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /vitest.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vitest/config' 2 | 3 | export default defineConfig({ 4 | test: { 5 | include: ['test/**/*.test.ts', 'test/**/*.spec.ts'], 6 | }, 7 | }) 8 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /src/runtime/types/IziToast.ts: -------------------------------------------------------------------------------- 1 | import type { IziToast, IziToastSettings } from 'izitoast' 2 | 3 | export default interface Toast extends IziToast { 4 | hideToast: (title: string, message: string, status: string) => void 5 | data: (data: IziToastSettings & { status: string }) => void 6 | } 7 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | modules: ['../src/module'], 3 | devtools: { enabled: true }, 4 | compatibilityDate: '2025-01-20', 5 | toast: { 6 | settings: { 7 | position: 'topRight', 8 | timeout: 5000, 9 | }, 10 | }, 11 | }) 12 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "my-module-playground", 4 | "type": "module", 5 | "scripts": { 6 | "dev": "nuxi dev", 7 | "build": "nuxi build", 8 | "generate": "nuxi generate" 9 | }, 10 | "dependencies": { 11 | "nuxt": "^3.15.2" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | -------------------------------------------------------------------------------- /src/runtime/composables/useToast.ts: -------------------------------------------------------------------------------- 1 | import type Toast from '../types/IziToast' 2 | import { useNuxtApp } from '#app' 3 | 4 | export function useToast(): Toast { 5 | if (import.meta.server) { 6 | return new Proxy({} as Toast, { get: () => () => {} }) // SSR Safe 7 | } 8 | return useNuxtApp().$iziToast 9 | } 10 | -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | import { createConfigForNuxt } from '@nuxt/eslint-config/flat' 3 | 4 | // Run `npx @eslint/config-inspector` to inspect the resolved config interactively 5 | export default createConfigForNuxt({ 6 | features: { 7 | // Rules for module authors 8 | tooling: true, 9 | // Rules for formatting 10 | stylistic: true, 11 | }, 12 | dirs: { 13 | src: [ 14 | './playground', 15 | ], 16 | }, 17 | }) 18 | .append( 19 | // your custom flat config here... 20 | ) 21 | -------------------------------------------------------------------------------- /test/basic.test.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath } from 'node:url' 2 | import { describe, it, expect } from 'vitest' 3 | import { setup, createPage } from '@nuxt/test-utils/e2e' 4 | 5 | describe('Basic Page Rendering', async () => { 6 | await setup({ 7 | rootDir: fileURLToPath(new URL('./fixtures/basic', import.meta.url)), 8 | browser: true, 9 | }) 10 | 11 | it('renders the page and displays iziToast notification', async () => { 12 | const page = await createPage('/') 13 | 14 | await page.waitForSelector('.iziToast-message') 15 | 16 | const toastText = await page.textContent('.iziToast-message') 17 | expect(toastText).toContain('Success message') 18 | }) 19 | }) 20 | -------------------------------------------------------------------------------- /.github/renovate.json: -------------------------------------------------------------------------------- 1 | { 2 | "timezone": "Asia/Manila", 3 | "configMigration": true, 4 | "extends": [ 5 | "config:recommended", 6 | "docker:pinDigests", 7 | "helpers:pinGitHubActionDigests", 8 | ":pinDevDependencies" 9 | ], 10 | "prHourlyLimit": 5, 11 | "schedule": ["before 3am on Monday"], 12 | "enabledManagers": ["npm", "bun"], 13 | "rangeStrategy": "bump", 14 | "updatePinnedDependencies": false, 15 | "packageRules": [ 16 | { 17 | "matchUpdateTypes": ["major", "pin"], 18 | "enabled": false 19 | }, 20 | { 21 | "groupName": "Bumped minor version of packages", 22 | "prHeader": "Bumped minor version of packages, check if builds are still passing.", 23 | "matchUpdateTypes": ["minor", "patch"], 24 | "matchDepTypes": ["dependencies", "devDependencies"] 25 | } 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .data 23 | .vercel_build_output 24 | .build-* 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: ci 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | pull_request: 8 | branches: 9 | - main 10 | 11 | jobs: 12 | lint: 13 | runs-on: ubuntu-latest 14 | 15 | steps: 16 | - uses: actions/checkout@v4 17 | 18 | - name: Setup Bun 19 | uses: oven-sh/setup-bun@v1 20 | with: 21 | bun-version: latest 22 | 23 | - name: Install dependencies 24 | run: bun install 25 | 26 | - name: Lint 27 | run: bun run lint 28 | 29 | test: 30 | runs-on: ubuntu-latest 31 | 32 | steps: 33 | - uses: actions/checkout@v4 34 | 35 | - name: Setup Bun 36 | uses: oven-sh/setup-bun@v1 37 | with: 38 | bun-version: latest 39 | 40 | - name: Install dependencies 41 | run: bun install 42 | 43 | - name: Install Playwright Browsers (exact version) 44 | run: node_modules/.bin/playwright install chromium --with-deps 45 | 46 | - name: Playground prepare 47 | run: bun run dev:prepare 48 | 49 | - name: Test 50 | run: bun run test 51 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, addPlugin, createResolver, addImports } from '@nuxt/kit' 2 | 3 | import type { IziToastSettings } from 'izitoast' 4 | 5 | export interface ModuleOptions { 6 | composableName?: string 7 | /** 8 | * Global iziToast settings that will be applied to all toasts. 9 | * See https://github.com/marcelodolza/iziToast for all available options 10 | */ 11 | settings?: Partial 12 | } 13 | 14 | export default defineNuxtModule({ 15 | meta: { 16 | name: 'nuxt-toast', 17 | configKey: 'toast', 18 | compatibility: { nuxt: '>=3.0.0' }, 19 | }, 20 | 21 | setup(options, nuxt) { 22 | const resolver = createResolver(import.meta.url) 23 | 24 | nuxt.hook('vite:extend', ({ config }) => { 25 | (config.optimizeDeps ??= {}).include ??= [] 26 | config.optimizeDeps.include.push('izitoast') 27 | }) 28 | 29 | nuxt.options.runtimeConfig.public.nuxtToastSettings = options.settings || {} 30 | 31 | addPlugin({ 32 | src: resolver.resolve('./runtime/plugin'), 33 | mode: 'client', 34 | }) 35 | 36 | addImports({ 37 | name: 'useToast', 38 | as: options.composableName ?? 'useToast', 39 | from: resolver.resolve('./runtime/composables/useToast'), 40 | }) 41 | }, 42 | }) 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-toast", 3 | "version": "1.4.0", 4 | "description": "A Nuxt module for iziToast notifications", 5 | "repository": "https://github.com/stephenjason89/nuxt-toast", 6 | "author": "Stephen Jason Wang", 7 | "license": "MIT", 8 | "type": "module", 9 | "exports": { 10 | ".": { 11 | "types": "./dist/types.d.mts", 12 | "import": "./dist/module.mjs" 13 | } 14 | }, 15 | "main": "./dist/module.mjs", 16 | "typesVersions": { 17 | "*": { 18 | ".": [ 19 | "./dist/types.d.mts" 20 | ] 21 | } 22 | }, 23 | "files": [ 24 | "dist" 25 | ], 26 | "scripts": { 27 | "commitlint": "commitlint --edit", 28 | "prepack": "nuxt-module-build prepare && nuxt-module-build build", 29 | "dev": "npm run dev:prepare && nuxi dev playground", 30 | "dev:build": "nuxi build playground", 31 | "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground", 32 | "release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags", 33 | "lint": "eslint .", 34 | "prepare": "husky", 35 | "test": "vitest run", 36 | "test:watch": "vitest watch", 37 | "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit" 38 | }, 39 | "dependencies": { 40 | "@nuxt/kit": "^4.2.0" 41 | }, 42 | "peerDependencies": { 43 | "izitoast": "^1.4.0" 44 | }, 45 | "devDependencies": { 46 | "@commitlint/cli": "^19.8.1", 47 | "@commitlint/config-conventional": "^19.8.1", 48 | "@nuxt/devtools": "^2.6.5", 49 | "@nuxt/eslint-config": "^1.9.0", 50 | "@nuxt/module-builder": "^1.0.2", 51 | "@nuxt/schema": "^4.2.0", 52 | "@nuxt/test-utils": "^3.19.2", 53 | "@types/node": "latest", 54 | "changelogen": "^0.6.2", 55 | "eslint": "^9.38.0", 56 | "husky": "^9.1.7", 57 | "nuxt": "^4.2.0", 58 | "playwright": "^1.55.0", 59 | "typescript": "^5.9.3", 60 | "vitest": "^3.2.4", 61 | "vue-tsc": "^3.1.0" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /src/runtime/plugin.ts: -------------------------------------------------------------------------------- 1 | import type { IziToastSettings } from 'izitoast' 2 | import * as iziToastModule from 'izitoast' 3 | import type Toast from './types/IziToast.ts' 4 | import 'izitoast/dist/css/iziToast.min.css' 5 | import { defineNuxtPlugin, useRuntimeConfig } from '#app' 6 | 7 | const globalToast 8 | = typeof window !== 'undefined' && 'iziToast' in window ? window.iziToast : undefined 9 | const iziToast = iziToastModule.default ?? globalToast ?? iziToastModule 10 | 11 | export default defineNuxtPlugin(() => { 12 | const settings = (useRuntimeConfig().public?.nuxtToastSettings as Partial) || {} 13 | 14 | const THEMES = { 15 | info: { color: 'blue', icon: 'ico-info' }, 16 | success: { color: 'green', icon: 'ico-success' }, 17 | warning: { color: 'orange', icon: 'ico-warning' }, 18 | error: { color: 'red', icon: 'ico-error' }, 19 | question: { color: 'yellow', icon: 'ico-question' }, 20 | } 21 | 22 | if (Object.keys(settings).length > 0) iziToast.settings(settings) 23 | 24 | return { 25 | provide: { 26 | iziToast: { 27 | ...iziToast, 28 | hideToast(title: string, message: string, status: keyof typeof THEMES) { 29 | const color = THEMES[status].color 30 | const newId = btoa(encodeURIComponent(`${title}${message}${color}`)).replace(/=/g, '') 31 | 32 | document 33 | .querySelectorAll(`.iziToast#${newId}`) 34 | .forEach( 35 | element => 36 | element instanceof HTMLDivElement 37 | && iziToast.hide({ title, message, id: newId }, element, 'replaced'), 38 | ) 39 | }, 40 | data(data: IziToastSettings & { status: keyof typeof THEMES }) { 41 | iziToast.show({ 42 | ...settings, 43 | ...data, 44 | color: THEMES[data.status]?.color, 45 | icon: THEMES[data.status]?.icon, 46 | timeout: data.timeout ?? settings.timeout ?? 2500, 47 | }) 48 | }, 49 | } as Toast, 50 | }, 51 | } 52 | }) 53 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | 4 | ## v1.4.0 5 | 6 | [compare changes](https://github.com/stephenjason89/nuxt-toast/compare/v1.3.2...v1.4.0) 7 | 8 | ### 🚀 Enhancements 9 | 10 | - Add global iziToast settings configuration support ([59aebb9](https://github.com/stephenjason89/nuxt-toast/commit/59aebb9)) 11 | 12 | ### ❤️ Contributors 13 | 14 | - Stephen Jason Wang 15 | 16 | ## v1.3.2 17 | 18 | [compare changes](https://github.com/stephenjason89/nuxt-toast/compare/v1.3.1...v1.3.2) 19 | 20 | ### 🩹 Fixes 21 | 22 | - Add global window.iziToast fallback for Bun 1.3 compatibility ([e930005](https://github.com/stephenjason89/nuxt-toast/commit/e930005)) 23 | 24 | ### ❤️ Contributors 25 | 26 | - Stephen Jason Wang 27 | 28 | ## v1.3.1 29 | 30 | [compare changes](https://github.com/stephenjason89/nuxt-toast/compare/v1.3.0...v1.3.1) 31 | 32 | ## v1.2.0 33 | 34 | [compare changes](https://github.com/stephenjason89/nuxt-toast/compare/v1.1.4...v1.2.0) 35 | 36 | ### 📖 Documentation 37 | 38 | - Update README image path to absolute URL for external accessibility ([ae0baea](https://github.com/stephenjason89/nuxt-toast/commit/ae0baea)) 39 | 40 | ### 🏡 Chore 41 | 42 | - **release:** V1.1.4 ([42da8c0](https://github.com/stephenjason89/nuxt-toast/commit/42da8c0)) 43 | - Update playwright-core to 1.50.0 ([847c227](https://github.com/stephenjason89/nuxt-toast/commit/847c227)) 44 | - Replace playwright-core with playwright & update other npm dependencies ([8ffeff6](https://github.com/stephenjason89/nuxt-toast/commit/8ffeff6)) 45 | - Nuxt 4 upgrade ([#1](https://github.com/stephenjason89/nuxt-toast/pull/1)) 46 | 47 | ### ❤️ Contributors 48 | 49 | - Griffin Wiebel ([@parion](https://github.com/parion)) 50 | - Stephen Jason Wang 51 | 52 | ## v1.1.4 53 | 54 | [compare changes](https://github.com/stephenjason89/nuxt-toast/compare/v1.1.3...v1.1.4) 55 | 56 | ### 🩹 Fixes 57 | 58 | - Add iziToast to vite optimizeDeps for proper module resolution ([149384c](https://github.com/stephenjason89/nuxt-toast/commit/149384c)) 59 | 60 | ### ❤️ Contributors 61 | 62 | - Stephen Jason Wang 63 | 64 | ## v1.1.3 65 | 66 | [compare changes](https://github.com/stephenjason89/nuxt-izi-toast/compare/v1.1.2...v1.1.3) 67 | 68 | ### 🩹 Fixes 69 | 70 | - Move iziToast to peerDependencies for better module resolution ([1d65a17](https://github.com/stephenjason89/nuxt-izi-toast/commit/1d65a17)) 71 | 72 | ### ❤️ Contributors 73 | 74 | - Stephen Jason Wang 75 | 76 | ## v1.1.2 77 | 78 | [compare changes](https://github.com/stephenjason89/nuxt-izi-toast/compare/v1.1.1...v1.1.2) 79 | 80 | ### 🩹 Fixes 81 | 82 | - Ensure compatibility with CommonJS module for izitoast ([73bef5b](https://github.com/stephenjason89/nuxt-izi-toast/commit/73bef5b)) 83 | 84 | ### 📖 Documentation 85 | 86 | - Clarify usage of custom composable name in Nuxt config ([03ddeeb](https://github.com/stephenjason89/nuxt-izi-toast/commit/03ddeeb)) 87 | - Enhance README with cover image and additional info ([fd6bf88](https://github.com/stephenjason89/nuxt-izi-toast/commit/fd6bf88)) 88 | 89 | ### 🎨 Styles 90 | 91 | - Ensure #app imports are properly included ([0833fc5](https://github.com/stephenjason89/nuxt-izi-toast/commit/0833fc5)) 92 | 93 | ### 🤖 CI 94 | 95 | - Switch to Bun for improved performance ([a732434](https://github.com/stephenjason89/nuxt-izi-toast/commit/a732434)) 96 | 97 | ### ❤️ Contributors 98 | 99 | - Stephen Jason Wang 100 | 101 | ## v1.1.1 102 | 103 | [compare changes](https://github.com/stephenjason89/nuxt-izi-toast/compare/v1.1.0...v1.1.1) 104 | 105 | ### 💅 Refactors 106 | 107 | - Rename configKey from iziToast to toast ([68e47ee](https://github.com/stephenjason89/nuxt-izi-toast/commit/68e47ee)) 108 | 109 | ### 📖 Documentation 110 | 111 | - Refine README with better installation guide ([5db254d](https://github.com/stephenjason89/nuxt-izi-toast/commit/5db254d)) 112 | 113 | ### 🏡 Chore 114 | 115 | - Clean up code and add tests for page rendering ([eaf4a8c](https://github.com/stephenjason89/nuxt-izi-toast/commit/eaf4a8c)) 116 | 117 | ### ❤️ Contributors 118 | 119 | - Stephen Jason Wang 120 | 121 | ## v1.1.0 122 | 123 | 124 | ### 🚀 Enhancements 125 | 126 | - Add iziToast integration with auto-imported composable ([b8cf45b](https://github.com/stephenjason89/nuxt-izi-toast/commit/b8cf45b)) 127 | 128 | ### ❤️ Contributors 129 | 130 | - Stephen Jason Wang 131 | 132 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | Project Logo 3 |
4 |

5 | Elegant, responsive and lightweight notification plugin with no dependencies. 6 |

7 | 8 |

9 | Documentation 10 |

11 | 12 | # Nuxt Toast 13 | 14 | [![npm version][npm-version-src]][npm-version-href] 15 | [![npm downloads][npm-downloads-src]][npm-downloads-href] 16 | [![License][license-src]][license-href] 17 | [![Nuxt][nuxt-src]][nuxt-href] 18 | 19 | A Nuxt module for easily integrating [iziToast](https://github.com/marcelodolza/iziToast) notifications into your Nuxt 4 application. 20 | 21 | ## Features 22 | 23 | - 🔔  Easily show toast notifications in your Nuxt 4 app 24 | - 🎨  Customizable styles and icons 25 | - ⚡  Supports auto-imported composable (`useToast()` by default) 26 | - 🔧  Fully configurable via `nuxt.config.ts` 27 | - 🔄  Supports changing the composable name dynamically 28 | 29 | ## Quick Setup 30 | 31 | Install the module to your Nuxt application with one command: 32 | 33 | ```bash 34 | npx nuxi module add nuxt-toast 35 | ``` 36 | 37 | ### **Manual Installation** 38 | 39 | If you prefer to install manually, run: 40 | 41 | ```bash 42 | # Using npm 43 | npm install nuxt-toast 44 | 45 | # Using yarn 46 | yarn add nuxt-toast 47 | 48 | # Using pnpm 49 | pnpm add nuxt-toast 50 | 51 | # Using bun 52 | bun add nuxt-toast 53 | ``` 54 | 55 | Then, add it to your Nuxt config: 56 | 57 | ```ts 58 | export default defineNuxtConfig({ 59 | modules: [ 60 | 'nuxt-toast' 61 | ] 62 | }) 63 | ``` 64 | ## 🚀 Usage 65 | 66 | Once installed, you can use `useToast()` anywhere in your Nuxt app: 67 | 68 | ### **Basic Example** 69 | 70 | ```vue 71 | 80 | ``` 81 | 82 | ### **Customizing Toast Appearance & Options** 83 | 84 | ```vue 85 | 95 | ``` 96 | 97 | ### **Dynamically Hiding Toasts** 98 | 99 | ```vue 100 | 115 | ``` 116 | 117 | ### **Configuration Options** 118 | 119 | You can configure the module in your `nuxt.config.ts`: 120 | 121 | ```ts 122 | export default defineNuxtConfig({ 123 | modules: ['nuxt-toast'], 124 | toast: { 125 | composableName: 'useNotification', // Customize the composable name 126 | settings: { 127 | // Global iziToast settings applied to all toasts 128 | rtl: true, 129 | position: 'topCenter', 130 | timeout: 3000, 131 | // ... see https://github.com/marcelodolza/iziToast for all options 132 | } 133 | } 134 | }) 135 | ``` 136 | 137 | #### **Customizing the Composable Name** 138 | 139 | If you've modified the `composableName` in `nuxt.config.ts`: 140 | 141 | ```ts 142 | export default defineNuxtConfig({ 143 | toast: { composableName: 'useNotification' } 144 | }) 145 | ``` 146 | 147 | Then use the updated composable name in your component: 148 | 149 | ```vue 150 | 156 | ``` 157 | 158 | #### **Global iziToast Settings** 159 | 160 | You can pass any [iziToast configuration options](https://github.com/marcelodolza/iziToast#settings) through the `settings` property: 161 | 162 | ```ts 163 | export default defineNuxtConfig({ 164 | toast: { 165 | settings: { 166 | rtl: true, // Right-to-left support 167 | position: 'topRight', // Default position 168 | timeout: 5000, // Default timeout 169 | closeOnEscape: true, // Close on ESC key 170 | closeOnClick: true, // Close on click 171 | pauseOnHover: true, // Pause on hover 172 | // ... and many more options 173 | } 174 | } 175 | }) 176 | ``` 177 | 178 | This ensures consistency with your custom naming convention. 🚀 179 | 180 | 181 | 182 | [npm-version-src]: https://img.shields.io/npm/v/nuxt-toast/latest.svg?style=flat&colorA=020420&colorB=00DC82 183 | [npm-version-href]: https://npmjs.com/package/nuxt-toast 184 | [npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-toast.svg?style=flat&colorA=020420&colorB=00DC82 185 | [npm-downloads-href]: https://npm.chart.dev/nuxt-toast 186 | [license-src]: https://img.shields.io/npm/l/nuxt-toast.svg?style=flat&colorA=020420&colorB=00DC82 187 | [license-href]: https://npmjs.com/package/nuxt-toast 188 | [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js 189 | [nuxt-href]: https://nuxt.com 190 | 191 | --------------------------------------------------------------------------------