can not set options for all the instances during plugin initialization(always defaul bottom-right)

[truongnguyengithub]

I set options for all the instances during plugin initialization, but when show message => always default defaul bottom-right.
Please help me!. Thank you so much!.

[Ankur K]

Please share a minimal reproduction.

[Ankur K]

https://jsfiddle.net/kudpe0Lt/2/

See, It is working fine for me.

[Ian]

I realise this is old issue but I also came across this just now.

You're demo does indeed work, however it falls apart when using useToast() it doesn't seem to pick up any options anymore.

In another file I have

  // This doesn't work
  useToast().open({
    message: data.message,
  })

In my main.js I have

const app = createApp(App)
  .use(store)
  .use(VueToast, {
    position: 'top-right'
  })
  .use(router)
  .mount("#app");
  // This works
  app.$toast.open({
    message: "Test"
  })

I also have to call .open() as an object because passing a string errors out.

Using Vue3 on a brand new install and no other plugins

[Ankur K]

Please share a jsfiddle or code sandbox

[Martin Halliday]

I am also having this issue. No matter what I set during initialization, the toast are always bottom right and stay for 3 seconds.

In my application startup I have:

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ToastPlugin from 'vue-toast-notification';
import 'vue-toast-notification/dist/theme-default.css'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(ToastPlugin, {
    duration: 10000,
    position: 'top'
})

app.use(createPinia())
app.use(router)

app.mount('#app')

Then in various components I have (abbreviated):

<script setup lang="ts" generic="T extends ModelBase">
import { useToast } from 'vue-toast-notification'

const $toast = useToast();

async function saveClicked(item: Editable<T>) {
  try {
    await item.save()
  } catch (error: any) {
    $toast.error(error.message)
  }
}
</script>

<template>
</template>

[Ankur K]

Can you use inject?

<script setup>
import { inject } from 'vue'

const toast = inject('$toast')


</script>