{"id":15486054,"url":"https://github.com/basedwon/snackify","last_synced_at":"2025-03-28T15:41:44.904Z","repository":{"id":210518741,"uuid":"726753503","full_name":"basedwon/snackify","owner":"basedwon","description":"A lightweight and versatile Nuxt module that leverages Vuetify to display snackbars (toasts) on your app or website.","archived":false,"fork":false,"pushed_at":"2023-12-16T05:11:54.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-22T16:40:01.982Z","etag":null,"topics":["nuxt","snackbar","toast","vuetify"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/basedwon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/contributing.md","funding":null,"license":"LICENSE","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}},"created_at":"2023-12-03T09:49:22.000Z","updated_at":"2023-12-03T10:21:18.000Z","dependencies_parsed_at":"2024-10-22T22:55:33.813Z","dependency_job_id":null,"html_url":"https://github.com/basedwon/snackify","commit_stats":{"total_commits":6,"total_committers":1,"mean_commits":6.0,"dds":0.0,"last_synced_commit":"ccffc428ec28d0b32b2930622e07147703b63eba"},"previous_names":["basedwon/snackify"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedwon%2Fsnackify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedwon%2Fsnackify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedwon%2Fsnackify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedwon%2Fsnackify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedwon","download_url":"https://codeload.github.com/basedwon/snackify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246056655,"owners_count":20716779,"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","snackbar","toast","vuetify"],"created_at":"2024-10-02T06:05:58.492Z","updated_at":"2025-03-28T15:41:44.876Z","avatar_url":"https://github.com/basedwon.png","language":"JavaScript","readme":"# Snackify\n\n\u003e A Vuetify snackbar for Nuxt\n\n[![npm](https://img.shields.io/npm/v/snackify?style=flat\u0026logo=npm)](https://www.npmjs.com/package/snackify)\n[![pipeline](https://gitlab.com/frenware/utils/snackify/badges/master/pipeline.svg)](https://gitlab.com/frenware/utils/snackify/-/pipelines)\n[![license](https://img.shields.io/npm/l/snackify)](https://gitlab.com/frenware/utils/snackify/-/blob/master/LICENSE)\n[![downloads](https://img.shields.io/npm/dw/snackify)](https://www.npmjs.com/package/snackify) \n\n[![Gitlab](https://img.shields.io/badge/Gitlab%20-%20?logo=gitlab\u0026color=%23383a40)](https://gitlab.com/frenware/utils/snackify)\n[![Github](https://img.shields.io/badge/Github%20-%20?logo=github\u0026color=%23383a40)](https://github.com/basedwon/snackify)\n[![Twitter](https://img.shields.io/badge/@basdwon%20-%20?logo=twitter\u0026color=%23383a40)](https://twitter.com/basdwon)\n[![Discord](https://img.shields.io/badge/Basedwon%20-%20?logo=discord\u0026color=%23383a40)](https://discordapp.com/users/basedwon)\n\nSnackify is a lightweight and versatile Nuxt module that leverages Vuetify to display snackbars (toasts) on your app or website. With a focus on ease of use and flexibility, Snackify offers a wide array of customizable options, allowing developers to create notifications that feel native to their app's design.\n\n## Features\n\n- Easy integration with Nuxt and Vuetify\n- Vuex store integrated for state management\n- Customizable through module options\n- Queue system for displaying multiple snackbars in sequence\n\n## Installation\n\n```bash\nnpm install snackify\n# OR\nyarn add snackify\n```\n\n## Usage\n\nFirst, make sure you have Vuetify installed and configured with Nuxt. Then, add `snackify` to your `nuxt.config.js` file:\n\n```js\nexport default {\n  // ... other configuration\n  buildModules: [\n    // ... other build modules\n    'snackify',\n  ],\n  snackify: {\n    // ... your custom options\n  },\n}\n```\n\n## Documentation\n\n- [API Reference](/docs/api.md)\n\n### Options\n\nYou can pass options to `snackify` through the `snackify` property in your `nuxt.config.js` file. The following options are available:\n\n```js\nexport default {\n  snackify: {\n    msg: 'Your default message',\n    color: 'success',\n    icon: true,\n    timeout: 3000,\n    top: true,\n    // ... other default options\n  }\n}\n```\n\n### Default Options\n\nWhen using Snackify, the following default options are provided out of the box. You can override these by providing your own settings:\n\n| Option   | Type    | Default   | Description                                                                                                      |\n|----------|---------|-----------|------------------------------------------------------------------------------------------------------------------|\n| `msg`    | String  | 'Success!'| The message text that appears in the snackbar.                                                                   |\n| `icon`   | Boolean | `true`    | Controls the visibility of the icon in the snackbar. If `true`, an icon is displayed.                            |\n| `color`  | String  | 'success' | Applies a color theme to the snackbar. The default is 'success', which typically styles the snackbar in green.   |\n| `class`  | String  | 'pb-6'    | A class that can be used to add custom styling to the snackbar, `pb-6` adds padding-bottom of 6 units.           |\n| `style`  | String  | ''        | Any inline styles you want to apply directly to the snackbar component.                                          |\n| `timeout`| Number  | 2000      | The duration in milliseconds that the snackbar will remain visible before automatically closing.                 |\n| `top`    | String  | null      | If set, the snackbar will appear at the top of the viewport. The value should be a valid CSS property.          |\n| `bottom` | String  | null      | If set, the snackbar will appear at the bottom of the viewport. The value should be a valid CSS property.       |\n| `left`   | String  | null      | If set, the snackbar will align to the left of the viewport. The value should be a valid CSS property.          |\n| `right`  | String  | null      | If set, the snackbar will align to the right of the viewport. The value should be a valid CSS property.         |\n\n### Methods\n\nTo display a snackbar, use the `$snackify` method injected into the Vue instance:\n\n```js\nthis.$snackify('This is a message', 'error')\n```\n\nYou can also pass an object to customize the snackbar further:\n\n```js\nthis.$snackify({ msg: 'Hello World', color: 'info', timeout: 5000 })\n```\n\n## Tests\n\nIn order to run the test suite, simply clone the repository and install its dependencies:\n\n```sh\ngit clone https://github.com/basedwon/snackify.git\ncd snackify\nnpm install\n```\n\nTo run the tests:\n\n```sh\nnpm test\n```\n\n## Contributing\n\nThank you! Please see our [contributing guidelines](/docs/contributing.md) for details.\n\n## Donations\n\nIf you find this project useful and want to help support further development, please send us some coin. We greatly appreciate any and all contributions. Thank you!\n\n**Bitcoin (BTC):**\n```\n1JUb1yNFH6wjGekRUW6Dfgyg4J4h6wKKdF\n```\n\n**Monero (XMR):**\n```\n46uV2fMZT3EWkBrGUgszJCcbqFqEvqrB4bZBJwsbx7yA8e2WBakXzJSUK8aqT4GoqERzbg4oKT2SiPeCgjzVH6VpSQ5y7KQ\n```\n\n## License\n\nsnackify is [MIT licensed](https://gitlab.com/frenware/utils/snackify/-/blob/master/LICENSE).\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedwon%2Fsnackify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedwon%2Fsnackify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedwon%2Fsnackify/lists"}