Methods not working in Vue JS

[bushcode]

I am trying to include izitoast in my vue js application. And I have declared the plugin in my dev,base and prod conf file. I have included the imports in my main.js file like this import '../node_modules/izitoast/dist/js/iziToast.min.js' import '../node_modules/izitoast/dist/css/iziToast.css'. And used izitoast in my mounted hook like $(this.$el).find('.addbtn').iziToast.success({ title: 'OK', message: 'Successfully inserted record!', });. I get error "Cannot read property success of undefined"? Can you help with this? PS: I have also tried using the import izitoast from 'izitoast' and Vue.use(izitoast)

[rafaelrenanpacheco]

You are trying to use iziToast as a Vue plugin, which is not.

It's very easy to get iziToast working in any JS framework, such as Vue. You just have to import izitoast, and use it...

Here is an example of iziToast working on my Vue project:

import izitoast from 'izitoast';

export default {
  name: 'app',
  methods: {
    notification() {
      izitoast.show({
        title: 'title',
        message: 'message',
        icon: 'fa fa-check',
      });
    },
  },
};

All I have to do is call notification() in this example to fire up iziToast.

[israelss]

The solution @rafaelrenanpacheco gave is the simplest one, for sure, and it works great, as it should, but if you want to use iziToast in several components, maybe it is better to create a plugin. You can do it like so:

// iziToastPlugin.js
import Vue from 'vue'
import iziToast from 'izitoast'
import 'izitoast/dist/css/iziToast.min.css'

// Here you can include some "default" settings
iziToast.settings({
  close: false,
  pauseOnHover: false,
  timeout: 3000,
  progressBar: false,
  layout: 2
})
// and export it
export default function install () {
  Object.defineProperties(Vue.prototype, {
    $iziToast: {
      get () {
        return iziToast
      }
    }
  })
}

In your main.js:

import iziToast from 'your/plugins/folder/iziToastPlugin'
Vue.use(iziToast)

Then you can, in any component, call any method from this.$iziToast. E.g.:

this.$iziToast.info({
  title: "It",
  message: "works! :)"
})

And of course, you can override the "default settings" you wrote on plugin file.

this.$iziToast.info({
  title: "It",
  message: "works! :)",
  timeout: 5000,
  progressBar: true,
  layout: 1
})

[marcelodolza]

https://github.com/arthurvasconcelos/vue-izitoast