{"id":15601880,"url":"https://github.com/codebender828/breadstick-examples","last_synced_at":"2025-04-08T13:43:06.525Z","repository":{"id":40827981,"uuid":"268328086","full_name":"codebender828/breadstick-examples","owner":"codebender828","description":"Example application on how to render custom Vue notifications","archived":false,"fork":false,"pushed_at":"2022-12-12T22:54:06.000Z","size":2609,"stargazers_count":4,"open_issues_count":17,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-14T09:57:15.806Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://breadstick-examples.now.sh","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/codebender828.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-31T17:20:26.000Z","updated_at":"2023-03-05T01:20:30.000Z","dependencies_parsed_at":"2023-01-28T02:31:09.478Z","dependency_job_id":null,"html_url":"https://github.com/codebender828/breadstick-examples","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebender828%2Fbreadstick-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebender828","download_url":"https://codeload.github.com/codebender828/breadstick-examples/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247852817,"owners_count":21007019,"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":[],"created_at":"2024-10-03T02:27:57.929Z","updated_at":"2025-04-08T13:43:06.508Z","avatar_url":"https://github.com/codebender828.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🥖 Breadstick Example App\n\n\u003e Using breadstick to create custom notifications\n\n[**⚡️View live demo**](https://breadstick-examples.now.sh)\n\n## About this example application:\nThis simple Nuxt application shows how to use [Breadstick's](https://github.com/codebender828/breadstick) stacking API to render authored Vue toast notifications.\n\nIn this demo I replicated 3 Toast designs and rendered them inside Breadstick:\n- [Vercel](https://vercel.com)'s Toast\n- [`vue-notification`](http://vue-notification.yev.io/) Toast\n- [Equal UI Component Library](https://quatrochan.github.io/Equal/components/notification) Notification.\n\nAll the Toasts used in this example were reimplemented using [Chakra UI Vue](https://vue.chakra-ui.com) for it's simple/flexible styling API.\n\nThe meat and potatoes of this example is in the [plugins/breadstick.client.js](https://github.com/codebender828/breadstick-examples/blob/master/plugins/breadstick.client.js) file. Feel free to copy this and use it in your own applications.\n\n#### For Vue.js\nIf you're using raw Vue.js, you can view [this gist](https://gist.github.com/codebender828/72dbee93dc2d419c60a18c114adecca7) that provides a similar high-level implementation.\n\n## What is Breadstick?\n[Breadstick](https://github.com/codebender828/breadstick) is a tiny Vue.js library that provides a simple **stacking, positioning, and dismissal** API for authored Vue.js toast notifications.\n\nThe reason I created it was to give me the flexibility of designing different toast notifications for different apps, so that let Breadstick handle the business logic of positioning, stacking and dismissal.\n\nThis allowed me to focus on building beautiful notifications, for different apps/themes, and not worry about them looking out of place. Breadstick let's you handle the appearance of your Toasts, but provides a powerful functional API you can use anywhere in your Vue applications.\n\n### Credits\nBreadstick was inspired by React's [Toasted Notes](https://github.com/bmcmahen/toasted-notes) by [Ben McMahen](https://github.com/bmcmahen)\n\n## Build Setup\n\n```bash\n# install dependencies\n$ yarn install\n\n# serve with hot reload at localhost:3000\n$ yarn dev\n\n# build for production and launch server\n$ yarn build\n$ yarn start\n\n# generate static project\n$ yarn generate\n```\n\nFor detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fbreadstick-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebender828%2Fbreadstick-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebender828%2Fbreadstick-examples/lists"}