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

[nateritter]

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

[nateritter]

Similarly, this.$noty.closeAll is not a function when trying to this.$noty.closeAll();

[stranger26]

@nateritter I dont think .button is a supported feature in this wrapper at the moment.

[nateritter]

@stranger26 Yes, I see that. I guess I should have edited this to be more of a request after I found it. I'd like buttons to be supported. :)

[FnnDK]

A simple workarround is importing Noty from 'noty' and using Noty.button instead of this.$noty.button.

Is'n the best solution, but works while this is'nt supported.

[ploissken]

Is this feature ever going to be supported? (:

[JonathanSchndr]

my workaround

import 'vuejs-noty/dist/vuejs-noty.css'
import Vue from 'vue'
import VueNoty from 'vuejs-noty'
import Noty from 'noty'

export default ({app}, inject) => {
  inject('noty', Vue.use(VueNoty, {
    timeout: 3000,
    progressBar: false,
    layout: 'topRight',
    closeWith: ['click', 'button'],
  }).noty)

  window.Noty = Noty // workaround for buttons
}

[matt6frey]

Similar to what @FnnDK was saying, in your main.js, you could probably extend/add that function to noty similar to how you would extend a prototype or object in JS. Perhaps something like:

/*
 Other Main.js imports
*/
import Noty from 'noty'
import VueNoty from 'vuejs-noty'

VueNoty.button = Noty.button

Vue.use(VueNoty)

// continue with app initialization

Note I haven't tested this but it seems like something that would be possible. There may be a little more involvement. Might look into this later tonight 👍