Code Monkey home page Code Monkey logo

vuejs-noty's Introduction

vuejs-noty

A Vue JS wrapper around Noty. Developped for Vue 2.

Getting Started

Install using npm:

$ npm install vuejs-noty

Import and register Vue plugin:

import Vue from 'vue'
import VueNoty from 'vuejs-noty'

Vue.use(VueNoty)

Import noty styles

Import stylesheet in your vue / js components:

import 'vuejs-noty/dist/vuejs-noty.css'

Or, import styles in your less / scss stylesheet:

@import '~vuejs-noty/dist/vuejs-noty.css';

Usage

In your Vue.js components, simply call one of these methods:

// Basic alert
this.$noty.show("Hello world!")

// Success notification
this.$noty.success("Your profile has been saved!")

// Error message
this.$noty.error("Oops, something went wrong!")

// Warning
this.$noty.warning("Please review your information.")

// Basic alert
this.$noty.info("New version of the app is available!")

All of these methods will return a Noty object instance, so you can use available API methods. Example:

this.$noty.show("Hello world!").setTimeout(4500);

Create your own notification with access to the full list of options. Example:

this.$noty.create({
    text: 'This is a custom notification!',
    type: 'warning',
    layout: 'topCenter',
    timeout: 4500,
    progressBar: false
}).show();

Configuration

Config defaults

You can set a default configuration object when registering the plugin. Example:

Vue.use(VueNoty, {
  timeout: 4000,
  progressBar: true,
  layout: 'topCenter'
})

Config override

All of the alert methods can accept a config object as second parameter if you need to override the defaults. Example:

this.$noty.info("Hey! Something very important here...", {
  killer: true,
  timeout: 6000,
  layout: 'topRight'
})

For more information about available configuration properties, please read Noty's documentation.

vuejs-noty's People

Contributors

dunhamjared avatar idelsink avatar renoguyon avatar stranger26 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

vuejs-noty's Issues

The plugin does absolutely nothing

I have vue version 2.6.12 and vuejs-noty version 0.1.3. I initialize:

Vue.use(VueNoty, {
  timeout: 4000,
  progressBar: false,
  layout: 'topCenter',
});

and call it in a component:

      console.log(this.$noty)
      this.$noty.show("Status updated!")

the noty object is printed, but there is absolutely no notification, absolutely nothing happens in the screen. There is no error in the console. How can I proceed to debug it further?

How to use in Nuxt.js

// plugins/noty.js
import Vue from 'vue'
import 'vuejs-noty/dist/vuejs-noty.css'
const VueNoty = require('vuejs-noty')

Vue.use(VueNoty, {
  timeout: 3000,
  progressBar: true,
  layout: 'topRight'
})
// nuxt.config.js
// If set ssr to true, it will the throw error 'document is not defined'
plugins: [
    { src: '@/plugins/noty.js', ssr: false },
  ]
<script>
// index.vue
export default {
  mounted () {
    console.log(this.$noty)
  }
}
</script>

$noty is undefined
$noty doesn't seem to be added to the Vue prototype, what should I do?

XSS handling

There should be an XSS handling option. I was really shocked when I was testing and saw that vue-noty doesn't filter out HTML. This is not very hard to solve but there should be an option for it!
thanks

Usage of $noty inside vuex

How can I use the $noty inside Vuex modules?

Currently what I'm doing is this:
pages/index.vue

export default { 
  created() {
    this.$store.dispatch('getUsers, this) // currently I need to pass this in order to use the $noty inside vuex module
  }, 
  computed: {
    users() {
      return this.$store.getters.users;
    }
  }
}
</script>

store/modules/users.js

export const state = () => ({
   users: []
});

export const actions = () => ({
  getUsers({commit}, context) {
      context.$noty.success('HELLO WORLD') `How can I use $noty without passing the this from the component?`
  } 
});

Version bump required to update NPM

There have been a few updates to this repo and NPM still has an old copy.

Could you version bump the project so NPM can copy over the updates?

config object not working?

(or am i doing it wrong?)

// ...
mounted() {
      this.$noty.show('Notification', { timeout: 3000 })
},
// ...

[Vue warn]: Error in mounted hook: "TypeError: Cannot create property 'timeout' on string 'alert'"

    at t (vuejs-noty.js?caee:formatted:327)
    at Object.t [as deepExtend] (vuejs-noty.js?caee:formatted:327)
    at new t (vuejs-noty.js?caee:formatted:1293)
    at Object.show (vuejs-noty.js?caee:formatted:1736)
    at VueComponent.mounted (ExchangeTrade.vue?1bec:67)
    at callHook (vue.esm.js?efeb:2921)
    at Object.insert (vue.esm.js?efeb:4158)
    at invokeInsertHook (vue.esm.js?efeb:5960)
    at Vue.patch [as __patch__] (vue.esm.js?efeb:6179)
    at Vue._update (vue.esm.js?efeb:2660)``` 


thanks for any help :)

How to use with CDN ?

How to use vuejs-noty in html file?
I try add

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuejs-noty.min.js"></script>
<script>
	Vue.use(VueNoty);
</script>

but have error:
ReferenceError: VueNoty is not defined

this.$noty.button / VueNoty.button is not a function

I'm attempting to add confirmation buttons to the dialog per https://ned.im/noty/#/confirm. When I try either ...

this.$noty.button('YES', 'btn', function () { console.debug('foo'); })

or

VueNoty.button('YES', 'btn', function () { console.debug('foo'); })

... and attempt to add it to the message's buttons property, I get the following error:

TypeError: this.$noty.button is not a function

Missing 'onCloseClick' callback

The original noty has got a callback called 'onCloseClick', which is invoked if the noty is closed by the user clicking it.

this.$noty.create not work

Try run example from README.md

this.$noty.create({
    text: 'This is a custom notification!',
    type: 'warning',
    layout: 'topCenter',
    timeout: 4500,
    progressBar: false
}).show();

throw error
TypeError: this.$noty.create is not a function

Error calling api method "closeAll"

Trying to close all messages using this:

this.$noty.closeAll();

Receiving this error:

Uncaught TypeError: this.$noty.closeAll is not a function

All other methods (this.$noty.success, this.$noty.error etc) are working fine.

Any idea why?? Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.