se-panfilov / vue-notifications

Vue.js agnostic library for non-blocking notifications
https://se-panfilov.github.io/vue-notifications/
MIT License
698 stars 54 forks source link

VueNotifications: trying to create method which is already exist #179

Closed frangte closed 4 years ago

frangte commented 4 years ago

Hi there,

I trying use vue-notifications as a mixin in nuxt project, below is example:

plugins/vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'
import 'jquery'
import toastr from 'toastr'
import 'toastr/build/toastr.min.css'

function toast({ title, message, type, timeout, cb }) {
  if (type === VueNotifications.types.warn) type = 'warning'
  return toastr[type](message, title, { timeOut: timeout })
}

const options = {
  success: toast,
  error: toast,
  info: toast,
  warn: toast
}

Vue.use(VueNotifications, options)

plugins/mixins.js

import Vue from 'vue'

Vue.mixin({
  notifications: {
    notifyError: {
      title: 'Error',
      message: 'Something wrong!',
      type: 'error'
    },
    notifySuccess: {
      title: 'Success',
      message: 'Successfully',
      type: 'success'
    },
    notifyWarring: {
      title: 'Warring',
      message: 'Warring',
      type: 'warn'
    }
  }
})

With this mixin, in every component I can use vue-notification via this.notifyError({ message: 'Some thing' }), but I got much of warning.

image

How fix this warning, or my config is wrong?

thanks

busheezy commented 4 years ago

I'm running into this issue as well.

frangte commented 4 years ago

I'm running into this issue as well.

try this

Edmund1645 commented 4 years ago

I had this problem, I figured that the problem was because it was a global mixin, and chances are that every single component will have the notifications option which is probably not what I wanted.

instead, I did this:

in mixins/notifications.js:

import VueNotifications from 'vue-notifications'
export default {
  notifications: {
    showError: {
      title: 'Oops!',
      message:
        "Something's wrong with, please check your internet and try again.",
      type: VueNotifications.types.error
    },
    showSuccess: {
      type: VueNotifications.types.success,
      title: 'Success!',
      message: 'Success!'
    }
  }
}

and then import only the mixin in any component I might need it.