JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 653
  • Score
    100M100P100Q100143F
  • License MIT

Vue.js version of Awesome Notifications JavaScript library

Package Exports

  • vue-awesome-notifications
  • vue-awesome-notifications/dist/styles/style.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-awesome-notifications) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm npm npm

Vue Awesome Notifications

It's a Vue.js version of Awesome Notifications library. Awesome Notifications is a lightweight JavaScript library for notifications.

5KB gzipped sizeno dependenciesadvanced async supportfully customizable>95% test coverage

Demo: https://f3oall.github.io/awesome-notifications/

Changelog: changelog.md

Demo GIF

Install

Attention! This library uses FontAwesome 4 icons, so you either need to make sure that FontAwesome is connected to your project, either disable icons, passing the icons: {enabled: false} property to options. Also you can preserve icons, setting up a custom template for them via editing options.icons.prefix and options.icons.suffix

Via NPM

npm install --save vue-awesome-notifications

Via Yarn

yarn add vue-awesome-notifications

In main.js

import Vue from "vue"
import VueAWN from "vue-awesome-notifications"

Vue.use(VueAWN, options)

In any of your files:

this.$awn.success("Your custom message")

Usage of default styles

For easier customization, SCSS version is preffered.

With SCSS - In your App.vue

<style lang="scss">
@import '~vue-awesome-notifications/dist/styles/style.scss';
</style>

With CSS - In your App.vue

<style lang="css">
@import 'vue-awesome-notifications/dist/styles/style.css';
</style>

Or in main.js

require("vue-awesome-notifications/dist/styles/style.css")

Customization

You can pass options object to initialization function to override defaults. List of available options can be found in Awesome Notifications README.md.

Styles

If you use SCSS, you can configure styles by redefining variables. List of available variables can be found in Awesome Notifications repo

Otherwise, if you use style.css, you can only override it.

Browser support

Last 2 versions.

License

This project is licensed under the MIT License - see the LICENSE file for details.