\n\n### Install\n\n```bash\nnpm install --save vue-notification\n```\n\n### How to\n\nIn main.js:\n\n```javascript\nimport Vue from 'vue'\nimport Notifications from 'vue-notification'\n\n/*\nor for SSR:\nimport Notifications from 'vue-notification/dist/ssr.js'\n*/\n\nVue.use(Notifications)\n```\n\nIn App.vue:\n\n```vue\n\n```\n\nIn any of your vue files:\n\n```javascript\nthis.$notify({\n group: 'foo',\n title: 'Important message',\n text: 'Hello user! This is a notification!'\n});\n```\n\nAnywhere else:\n\n```javascript\nimport Vue from 'vue'\n\nVue.notify({\n group: 'foo',\n title: 'Important message',\n text: 'Hello user! This is a notification!'\n})\n```\n\n### Custom instance configuration\n\nAll configurations are optional.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| name | String | notify | Defines the instance name. It's prefixed with the dollar sign. E.g. `$notify` |\n| componentName | String | notifications | The component's name |\n\n### Props\n\nAll props are optional.\n\n| Name | Type | Default | Description |\n| --- | --- | --- | --- |\n| group | String | null | Name of the notification holder, if specified |\n| type | String | null | Class that will be assigned to the notification |\n| width | Number/String | 300 | Width of notification holder, can be `%`, `px` string or number. Valid values: '100%', '200px', 200 |\n| classes | String/Array | 'vue-notification' | List of classes that will be applied to notification element |\n| position | String/Array | 'top right' | Part of the screen where notifications will pop out |\n| animation-type | String | 'css' | Type of animation, currently supported types are `css` and `velocity` |\n| animation-name | String | null | Animation name required for `css` animation |\n| animation | Object | `$`* | Animation configuration for `Velocity` animation |\n| duration | Number | 3000 | Time (ms) animation stays visible (if **negative** - notification will stay **forever** or until clicked) |\n| speed | Number | 300 | Speed of animation showing/hiding |\n| max | Number | Infinity | Maximum number of notifications that can be shown in notification holder |\n| reverse | Boolean | false | Show notifications in reverse order |\n| ignoreDuplicates | Boolean | false | Ignore repeated instances of the same notification |\n| closeOnClick | Boolean | true | Close notification when clicked |\n\n$ = `{enter: {opacity: [1, 0]}, leave: {opacity: [0, 1]}}`\n\n### API\n\n```javascript\n this.$notify({\n // (optional)\n // Name of the notification holder\n group: 'foo',\n\n // (optional)\n // Class that will be assigned to the notification\n type: 'warn',\n\n // (optional)\n // Title (will be wrapped in div.notification-title)\n title: 'This is title',\n\n // Content (will be wrapped in div.notification-content)\n text: 'This is content ',\n\n // (optional)\n // Overrides default/provided duration\n duration: 10000,\n\n // (optional)\n // Overrides default/provided animation speed\n speed: 1000\n\n // (optional)\n // Data object that can be used in your template\n data: {}\n })\n```\n\nTitle and Text can be HTML strings.\n\nAlso you can use simplified version:\n\n```javascript\nthis.$notify('text')\n```\n\n### Groups\n\nIf you are planning to use `notification` component for 2 or more completely different types of notifications (for example, authentication error messages in top center and generic app notifications in bottom-right corner) - you can specify `group` property which is essentially a name of notification holder.\n\nExample:\n\n```vue\n\n\n```\n\n```javascript\nthis.$notify({ group: 'auth', text: 'Wrong password, please try again later' })\n```\n\n### Position\n\n`Position` property requires a string with 2 keywords for vertical and horizontal postion.\n\nFormat: `\"\"`.\n\n- Horizontal options: `left`, `center`, `right`\n- Vertical options: `top`, `bottom`\n\nDefault is \"top right\".\n\nExample:\n\n```vue\n\n```\n\n### Style\n\nYou can write your own css styles for notifications:\n\nStructure:\n\n```scss\n// SCSS:\n\n.my-style {\n // Style of the notification itself\n\n .notification-title {\n // Style for title line\n }\n\n .notification-content {\n // Style for content\n }\n\n &.my-type {\n /*\n Style for specific type of notification, will be applied when you\n call notification with \"type\" parameter:\n this.$notify({ type: 'my-type', message: 'Foo' })\n */\n }\n}\n```\n\nTo apply this style you will have to specify \"classes\" property:\n\n```vue\n \n```\n\n**Default:**\n\n```scss\n.vue-notification {\n padding: 10px;\n margin: 0 5px 5px;\n\n font-size: 12px;\n\n color: #ffffff;\n background: #44A4FC;\n border-left: 5px solid #187FE7;\n\n &.warn {\n background: #ffb648;\n border-left-color: #f48a06;\n }\n\n &.error {\n background: #E54D42;\n border-left-color: #B82E24;\n }\n\n &.success {\n background: #68CD86;\n border-left-color: #42A85F;\n }\n}\n```\n\n### Custom template (slot)\n\nOptional scope slot named \"body\" is supported.\n\nScope props:\n\n| Name | Type | Description |\n| --- | --- | --- |\n| item | Object | notification object |\n| close | Function | when called closes the notification |\n\nExample:\n\n```vue\n\n \n
\n \n\n```\n\n\n\n### Width\n\nWidth can be set using a string with a percent or pixel extension (if simple number is not enough).\n\nExamples: '100%', '50px', '50', 50\n\n### Velocity Animation\n\nPlugin can use use `Velocity` library to make js-powered animations. To start using it you will have to manually install `velocity-animate` & supply the librarty to `vue-notification` plugin (reason for doing that is to reduce the size of this plugin).\n\nIn your `main.js`:\n\n```javascript\nimport Vue from 'vue'\nimport Notifications from 'vue-notification'\nimport velocity from 'velocity-animate'\n\nVue.use(Notifications, { velocity })\n```\n\nIn the template you will have to set `animation-type=\"velocity\"`.\n\n```vue\n\n```\n\nThe animation configuration consists of 2 objects/functions: `enter` and `leave`.\n\nExample:\n\n```javascript\n/*\n * Both 'enter' and 'leave' can be either an object or a function\n */\nanimation = {\n enter (element) {\n /*\n * \"element\" - is a notification element\n * (before animation, meaning that you can take it's initial height, width, color, etc)\n */\n let height = element.clientHeight\n\n return {\n // Animates from 0px to \"height\"\n height: [height, 0],\n\n // Animates from 0 to random opacity (in range between 0.5 and 1)\n opacity: [Math.random() * 0.5 + 0.5, 0]\n } \n },\n leave: {\n height: 0,\n opacity: 0\n }\n}\n```\n\n```vue\n\n```\n\n### Cleaning\n\nTo remove all notifications, use `clean: true` parameter.\n\n```javascript\nthis.$notify({\n group: 'foo',\n clean: true\n})\n```\n\n### FAQ\n\nCheck closed issues with `FAQ` label to get answers for most asked questions.\n\n### Development\n\n```bash\nTo run an example:\n\n# Build main library\n\ncd vue-notification\nnpm install\nnpm run build\n\n# Build and run demo\n\ncd demo\nnpm install\nnpm run dev\n\n# Run tests\nnpm run test\n\n# Watch unit tests\nnpm run unit:watch\n```\n","maintainers":[{"name":"euvl","email":"yev.vlasenko@gmail.com"}],"time":{"modified":"2022-06-28T20:01:09.331Z","created":"2016-11-24T12:21:35.483Z","1.0.0":"2016-11-24T12:21:35.483Z","1.0.1":"2016-11-24T12:30:05.840Z","1.0.2":"2016-11-24T13:26:55.927Z","1.0.3":"2016-11-24T13:35:10.838Z","1.0.4":"2016-11-24T13:46:16.173Z","1.0.5":"2016-11-24T14:16:39.655Z","1.0.6":"2016-11-24T14:23:37.110Z","1.1.0":"2017-05-24T15:02:56.055Z","1.1.1":"2017-05-24T15:05:54.334Z","1.1.2":"2017-05-24T15:44:01.392Z","1.1.4":"2017-05-25T12:46:30.449Z","1.1.5":"2017-05-25T12:52:56.647Z","1.2.1":"2017-06-09T00:48:07.557Z","1.2.2":"2017-06-23T05:52:23.434Z","1.2.3":"2017-06-23T07:13:58.715Z","1.3.0":"2017-07-10T10:11:01.519Z","1.3.1":"2017-07-11T14:43:24.473Z","1.3.2":"2017-07-29T21:10:28.171Z","1.3.3":"2017-08-24T19:35:29.331Z","1.3.4":"2017-08-29T09:33:13.397Z","1.3.6":"2018-01-27T18:16:00.442Z","1.3.7":"2018-02-11T18:52:38.158Z","1.3.9":"2018-05-28T21:00:35.334Z","1.3.10":"2018-05-29T15:07:19.544Z","1.3.11":"2018-07-02T15:07:50.210Z","1.3.12":"2018-07-02T15:13:23.816Z","1.3.13":"2018-08-12T13:49:23.778Z","1.3.14":"2018-12-09T07:40:50.309Z","1.3.15":"2019-01-31T08:59:15.837Z","1.3.16":"2019-02-09T08:49:53.341Z","1.3.19":"2019-10-26T09:15:05.980Z","1.3.20":"2019-10-29T18:57:23.890Z"},"keywords":["web","front-end","vue","vuejs","notification","vue-notification","vue-notifications"],"repository":{"type":"git","url":"git+https://github.com/euvl/vue-notification.git"},"author":{"name":"euvl"},"readmeFilename":"README.md","homepage":"https://github.com/euvl/vue-notification#readme","bugs":{"url":"https://github.com/euvl/vue-notification/issues"},"license":"MIT","users":{"mmork":true,"lucianoalzugaray":true}}
![\"screen](\"https://user-images.githubusercontent.com/1577802/36840220-21beb89c-1d3c-11e8-98a4-45fc334842cf.png\")
\n \n![](\"https://media.giphy.com/media/xUn3C6FmbGmszMem64/giphy.gif\")
\n