How to change the position of toast message in vue-toasted?

Question

I use vue-toasted. I registered vue-toasted in main.js and use it as below:

import Toasted from 'vue-toasted'

Vue.use(Toasted, Option)

And use it like this in a vue component

this.$toasted.error("Temperature too Hot").goAway(5000),

But I do not know how to change the position of toasted message. The current position is 'top-right'. How do I change this?

Answer 1

By just following the link you provided, it is apparent that you can change the position with the Container Position setting.

Also you can set the position according to the API page.

API Options below are the options you can pass to create a toast

Position String 'top-right' Position of the toast container ['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']

Answer 2

I found a way to change the position of toasted msg.

This is the way that I found

if you want to use Options inside error or show method, you do not put option value in Vue.use().

After removing option in Vue.use, I can move msg

I hope it will be helpful to you guys

Answer 3

You can refer the demo here

let toast = this.$toasted.show("Toasted !!", { 
     theme: "toasted-primary", 
     position: "top-right", 
     duration : 5000
});

Answer 4

You haven't actually set the options in your main.js

import Toasted from 'vue-toasted';
const toastOptions = {
    position: 'top-center',
    duration : 2000,
    theme: "toasted-primary"
}
Vue.use(Toasted, toastOptions);