{"id":15779257,"url":"https://github.com/modbender/nuxt-snackbar","last_synced_at":"2025-04-14T22:54:27.950Z","repository":{"id":142385691,"uuid":"611668581","full_name":"modbender/nuxt-snackbar","owner":"modbender","description":"A Nuxt Snackbar/Toast Implementation independent of CSS framework","archived":false,"fork":false,"pushed_at":"2025-01-20T05:01:48.000Z","size":535,"stargazers_count":27,"open_issues_count":1,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T22:54:14.294Z","etag":null,"topics":["nuxt","nuxt-module","nuxtjs","snackbar","toast","vue"],"latest_commit_sha":null,"homepage":"https://nuxt.com/modules/snackbar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modbender.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","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},"funding":{"github":["modbender"],"patreon":"modbender","open_collective":null,"ko_fi":"modbender","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"custom":["paypal.me/modbender"]}},"created_at":"2023-03-09T09:52:37.000Z","updated_at":"2025-02-24T10:03:10.000Z","dependencies_parsed_at":"2024-03-10T18:29:05.032Z","dependency_job_id":"42d3ea71-75ec-4ef7-957e-628ebb87a5e6","html_url":"https://github.com/modbender/nuxt-snackbar","commit_stats":{"total_commits":45,"total_committers":7,"mean_commits":6.428571428571429,"dds":0.5555555555555556,"last_synced_commit":"ecc8562df0f1e32b71b1b5ef881074d79c7d26f0"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-snackbar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-snackbar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-snackbar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-snackbar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modbender","download_url":"https://codeload.github.com/modbender/nuxt-snackbar/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975330,"owners_count":21192208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["nuxt","nuxt-module","nuxtjs","snackbar","toast","vue"],"created_at":"2024-10-04T18:03:42.355Z","updated_at":"2025-04-14T22:54:27.933Z","avatar_url":"https://github.com/modbender.png","language":"TypeScript","funding_links":["https://github.com/sponsors/modbender","https://patreon.com/modbender","https://ko-fi.com/modbender","paypal.me/modbender"],"categories":[],"sub_categories":[],"readme":"# Nuxt Snackbar\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nA Snackbar/Toast Implementation independent of CSS framework especially for Nuxt 3\n\nNuxt Snackbar provides a wrapper for [vue3-snackbar](https://github.com/craigrileyuk/vue3-snackbar) to be used with Nuxt.js\n\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n- Easy to integrate\n- Instantly usable Snackbar, no config required\n- Options to fully customize snackbar (See all [options](https://github.com/craigrileyuk/vue3-snackbar#props))\n\n## Quick Setup\n\n1. Add `nuxt-snackbar` dependency to your project\n\n    ```bash\n    npx nuxi@latest module add snackbar\n    ```\n\n2. Add `nuxt-snackbar` to the `modules` section of `nuxt.config.ts`\n\n    ```js\n    export default defineNuxtConfig({\n      modules: ['nuxt-snackbar'],\n      snackbar: {\n        bottom: true,\n        right: true,\n        duration: 5000\n      }\n    })\n    ```\n\n3. Add the Snackbar Component to `app.vue`\n\n    ```xml\n    \u003ctemplate\u003e\n      \u003cdiv\u003e\n        \u003cmain\u003e\n          Main Content\n        \u003c/main\u003e\n        \u003cNuxtSnackbar /\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n    ```\n\n   If you are using layouts and pages in your application, your `app.vue` should look something like this.\n\n   ```xml\n    \u003ctemplate\u003e\n      \u003cNuxtLayout\u003e\n        \u003cNuxtPage /\u003e\n        \u003cNuxtSnackbar /\u003e\n      \u003c/NuxtLayout\u003e\n    \u003c/template\u003e\n   ```\n   \n   If none of the above works, you can try adding it to `layouts/default.vue` instead\n   \n    ```xml\n    \u003ctemplate\u003e\n      \u003cdiv\u003e\n        \u003cslot /\u003e\n        \u003cNuxtSnackbar /\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n    ```\n\n5. Call `useSnackbar()` to use snackbar methods and features.\n\n    Composition API\n    ```js\n    const snackbar = useSnackbar();\n\n    snackbar.add({\n        type: 'success',\n        text: 'This is a snackbar message'\n    })\n    ```\n\n    Options API\n    ```js\n    export default {\n        methods: {\n            successMessage() {\n                this.$snackbar.add({\n                    type: 'success',\n                    text: 'This is a snackbar message'\n                })\n            }\n        }\n    }\n    ```\n\nThat's it! You can now use Nuxt Snackbar in your Nuxt app ✨\n\n## Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Generate type stubs\nyarn dev:prepare\n\n# Develop with the playground\nyarn dev\n\n# Build the playground\nyarn dev:build\n\n# Run ESLint\nyarn lint\n\n# Run Vitest\nyarn test\nyarn test:watch\n\n# Release new version\nyarn release\n```\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-snackbar/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-snackbar\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-snackbar.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-snackbar\n[license-src]: https://img.shields.io/npm/l/nuxt-snackbar.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-snackbar\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodbender%2Fnuxt-snackbar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodbender%2Fnuxt-snackbar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodbender%2Fnuxt-snackbar/lists"}