{"id":49494061,"url":"https://github.com/inertia-vuetify/notifications","last_synced_at":"2026-05-01T08:32:59.722Z","repository":{"id":329426874,"uuid":"1119476580","full_name":"inertia-vuetify/notifications","owner":"inertia-vuetify","description":"Vue package to display Inertia flash messages as Vuetify snackbar notifications.","archived":false,"fork":false,"pushed_at":"2026-03-03T12:34:47.000Z","size":489,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-03T16:13:28.340Z","etag":null,"topics":["inertia","inertiajs","vue","vuejs","vuetify","vuetify3","vuetifyjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@inertia-vuetify/notifications","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/inertia-vuetify.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-19T10:30:07.000Z","updated_at":"2026-03-03T12:34:35.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/inertia-vuetify/notifications","commit_stats":null,"previous_names":["gigerit/inertia-vuetify-notifications","inertia-vuetify/notifications"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/inertia-vuetify/notifications","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inertia-vuetify%2Fnotifications","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inertia-vuetify%2Fnotifications/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inertia-vuetify%2Fnotifications/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inertia-vuetify%2Fnotifications/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/inertia-vuetify","download_url":"https://codeload.github.com/inertia-vuetify/notifications/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/inertia-vuetify%2Fnotifications/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32490811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inertia","inertiajs","vue","vuejs","vuetify","vuetify3","vuetifyjs"],"created_at":"2026-05-01T08:32:59.047Z","updated_at":"2026-05-01T08:32:59.714Z","avatar_url":"https://github.com/inertia-vuetify.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Inertia Vuetify Notifications\n\nDisplay Inertia flash messages as Vuetify snackbar notifications with support for actions.\n\n![Inertia Vuetify Notifications](./docs/screenshots/example1.png)\n![Inertia Vuetify Notifications](./docs/screenshots/example2.png)\n\n\n## Installation\n\n```bash\nnpm install @inertia-vuetify/notifications\n```\n\n### Peer Dependencies\n\nThis package requires the following peer dependencies:\n\n- `vue` ^3.4.0\n- `vuetify` ^4.0.0\n- `@inertiajs/vue3` ^2.0.0 (with flash event support, v2.3.3+)\n\n## Setup\n\n### 1. Register the Plugin\n\n```ts\n// main.ts\nimport { createApp } from 'vue'\nimport { createVuetify } from 'vuetify'\nimport { inertiaVuetifyNotifications } from '@inertia-vuetify/notifications'\nimport App from './App.vue'\n\nconst app = createApp(App)\nconst vuetify = createVuetify()\n\napp.use(vuetify)\napp.use(inertiaVuetifyNotifications({\n  // Optional configuration\n  flashKeys: ['success', 'error', 'warning', 'info', 'notification'],\n  defaults: {\n    timeout: 5000,\n    closable: true,\n    location: 'bottom',\n  },\n  colorMap: {\n    success: 'success',\n    error: 'error',\n    warning: 'warning',\n    info: 'info',\n  },\n}))\n\napp.mount('#app')\n```\n\n### 2. Add the NotificationProvider Component\n\nPlace the `NotificationProvider` component in your root layout:\n\n```vue\n\u003c!-- App.vue or Layout.vue --\u003e\n\u003cscript setup lang=\"ts\"\u003e\nimport { NotificationProvider } from '@inertia-vuetify/notifications'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cv-app\u003e\n    \u003cNotificationProvider /\u003e\n    \u003crouter-view /\u003e\n  \u003c/v-app\u003e\n\u003c/template\u003e\n```\n\n## Usage\n\n### Backend (Laravel)\n\n#### Simple Notifications\n\nFlash a simple string message using a key that maps to a color:\n\n```php\n// In your controller\nInertia::flash('success', 'Item saved successfully');\nInertia::flash('error', 'Something went wrong');\nInertia::flash('warning', 'Please review your input');\nInertia::flash('info', 'New features available');\n```\n\nFor more information, see the [Inertia Flash Data documentation](https://inertiajs.com/docs/v2/data-props/flash-data).\n\n#### Structured Notifications\n\nFor more control, pass an object with additional options:\n\n```php\nInertia::flash('notification', [\n    'message' =\u003e 'Item deleted',\n    'type' =\u003e 'warning',        // Maps to snackbar color\n    'timeout' =\u003e 8000,          // Custom timeout in ms\n    'closable' =\u003e true,         // Show close button\n]);\n```\n\n#### Notifications with Actions\n\nActions allow users to respond to notifications:\n\n```php\nInertia::flash('notification', [\n    'message' =\u003e 'Item moved to trash',\n    'type' =\u003e 'info',\n    'actions' =\u003e [\n        // Named action - calls a registered handler\n        [\n            'label' =\u003e 'Undo',\n            'name' =\u003e 'undo-delete',\n            'payload' =\u003e ['id' =\u003e 123],\n        ],\n        // URL action - makes an Inertia request\n        [\n            'label' =\u003e 'View Trash',\n            'method' =\u003e 'get',\n            'url' =\u003e '/trash',\n        ],\n    ],\n]);\n```\n\n### Frontend\n\n#### Registering Action Handlers\n\nRegister handlers at plugin initialization for app-wide actions:\n\n```ts\napp.use(inertiaVuetifyNotifications({\n  actions: {\n    'undo-delete': async (payload) =\u003e {\n      await router.post('/items/restore', payload)\n    },\n  },\n}))\n```\n\nOr register dynamically in components:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { onUnmounted } from 'vue'\nimport { useNotifications } from '@inertia-vuetify/notifications'\nimport { router } from '@inertiajs/vue3'\n\nconst { registerAction, unregisterAction } = useNotifications()\n\n// Register a page-specific action\nregisterAction('undo-delete', async (payload) =\u003e {\n  await router.post('/items/restore', payload)\n})\n\n// Clean up on unmount\nonUnmounted(() =\u003e {\n  unregisterAction('undo-delete')\n})\n\u003c/script\u003e\n```\n\n#### Manual Notifications\n\nTrigger client side notifications programmatically from any component:\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport { useNotifications } from '@inertia-vuetify/notifications'\n\nconst { notify } = useNotifications()\n\nfunction showSuccess() {\n  notify('Operation completed!', 'success')\n}\n\nfunction showStructured() {\n  notify({\n    message: 'Custom notification',\n    type: 'info',\n    timeout: 3000,\n    actions: [\n      { label: 'Dismiss', name: 'dismiss' },\n    ],\n  })\n}\n\u003c/script\u003e\n```\n\n## Configuration\n\n### Plugin Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `flashKeys` | `string[]` | `['success', 'error', 'warning', 'info', 'notification']` | Flash keys to listen for |\n| `defaults.timeout` | `number` | `5000` | Default notification timeout in ms |\n| `defaults.closable` | `boolean` | `true` | Show close button by default |\n| `defaults.location` | `string` | `'bottom'` | Snackbar position |\n| `colorMap` | `Record\u003cstring, string\u003e` | `{ success, error, warning, info }` | Map flash keys to Vuetify colors |\n| `actions` | `Record\u003cstring, ActionHandler\u003e` | `{}` | Initial action handlers |\n\n### Action Types\n\n#### Named Actions\n\nCalls a registered handler with an optional payload:\n\n```ts\ninterface NamedAction {\n  label: string\n  name: string\n  payload?: Record\u003cstring, unknown\u003e\n}\n```\n\n#### URL Actions\n\nMakes an Inertia request when clicked:\n\n```ts\ninterface UrlAction {\n  label: string\n  method: 'get' | 'post' | 'put' | 'patch' | 'delete'\n  url: string\n  data?: Record\u003cstring, unknown\u003e\n}\n```\n\n## API\n\n### `@inertia-vuetify/notifications(options?)`\n\nCreates the Vue plugin. Returns a `Plugin` instance.\n\n### `useNotifications()`\n\nComposable to access the notification context. Must be used within a component tree where the plugin is installed.\n\nReturns:\n\n| Property | Type | Description |\n|----------|------|-------------|\n| `queue` | `InternalSnackbarItem[]` | Reactive notification queue |\n| `notify` | `(notification, flashKey?) =\u003e void` | Add a notification |\n| `registerAction` | `(name, handler) =\u003e void` | Register an action handler |\n| `unregisterAction` | `(name) =\u003e void` | Remove an action handler |\n| `executeAction` | `(action) =\u003e Promise\u003cvoid\u003e` | Execute an action (internal) |\n| `options` | `NotificationPluginOptions` | Current plugin options |\n\n### `NotificationProvider`\n\nVue component that renders the `VSnackbarQueue`. Place once in your app layout.\n\n## License\n\nMIT\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finertia-vuetify%2Fnotifications","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finertia-vuetify%2Fnotifications","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finertia-vuetify%2Fnotifications/lists"}