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

1👍

You can refer the demo here

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

0👍

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

Container Position

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’]

0👍

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

0👍

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);

Leave a comment