Position

[klinux]

There any way to set the position of toaster?

Thank you

[se-panfilov]

@klinux Hi. Yes and no ))

1. First of all - it depends of what toast lib do you use along with VueNotifications. For Instance mini-toastr doesn't provide such functionality.

For instance toastr (you can find example of setup at https://se-panfilov.github.io/vue-notifications) do provide this fucntionality.

I didn't check following code but I think you could do something like:

// your config
import VueNotifications from 'vue-notifications'
import 'jquery'
import toastr from 'toastr'// https://github.com/CodeSeven/toastr
import 'toastr/build/toastr.min.css'

function toast ({title, message, type, timeout, cb, position}) { //we've added 'position' here
  if (type === VueNotifications.types.warn) type = 'warning'
  if (position) toastr.options.positionClass= position //Ve've set position here
  return toastr[type](message, title, {timeOut: timeout})
}

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

Vue.use(VueNotifications, options)
// end of config

// In you component
export default {
  name: 'MyComponent',
  data () {
    return {}
  },
  notifications: {
    showSuccessMsg: {
      type: VueNotifications.types.success,
      title: 'Hello there',
      message: 'That\'s the success!',
      position:  'toast-bottom-full-width' //Here, we've added the 'position' field
    },
    showInfoMsg: {
      type: VueNotifications.types.info,
      title: 'Hey you',
      message: 'Here is some info for you'
    },
    showWarnMsg: {
      type: VueNotifications.types.warn,
      title: 'Wow, man',
      message: 'That\'s the kind of warning'
    },
    showErrorMsg: {
      type: VueNotifications.types.error,
      title: 'Wow-wow',
      message: 'That\'s the error'
    }
  }
}
//

2. And even if you use toast lib that doesn't support position, you could always be able to override css of the toatst