Global ToastContainerOptions not working

[StefanNowak]

I cant get the global options working in my vite / vue3 project... I have the following Setup:

i installed the version 0.1.14 and changed the types in tsconfig.ts to "types": ["vue3-toastify/global"]

My files:

//plugins/toastify.ts
export const toastOptions = {
    newestOnTop: true,
    dangerouslyHTMLString: true,
    transition: toast.TRANSITIONS.FLIP,
    position: toast.POSITION.BOTTOM_LEFT,
    limit: 5,
    autoClose: AUTO_CLOSE.DEFAULT,
    clearOnUrlChange: false,
} as ToastContainerOptions

//main.ts
import Vue3Toastify from 'vue3-toastify'
import {toastOptions} from "@/plugins/toastify";
import App from '@/App.vue'

const app = createApp(App)
app.use(Vue3Toastify, toastOptions)

//Home.vue
<template></template>
import {toast} from "vue3-toastify";
export default {
  setup() {
    toast.success('test')
  }
}

But the global settings are ignored.

It only works, if i add the updateGlobalOptions to the Home Component like:

//Home.vue
<template></template>
import {toastOptions} from "@/plugins/toastify";
import {toast, updateGlobalOptions} from "vue3-toastify";

export default {
  setup() {
    updateGlobalOptions(toastOptions)
    toast.success('test')
  }
}

But this will only work for the current Home Component. I tried placing the updateGlobalOptions in the App.vue, main.ts... nothing works :(

[jerrywu001]

I guess the limit won't take effect, actually, all toasts shouldn't fire at the same point in time.

see this online demo:

https://stackblitz.com/edit/vitejs-vite-4qr4e7?file=src%2FApp.vue,src%2Fmain.ts&terminal=dev

<script lang="ts">
import { nextTick } from 'vue';
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default {
  setup() {
    toast.success('test1'); // do not trigger all toasts at a same point directly

    setTimeout(() => {
      toast.success('test2');
    });

    setTimeout(() => {
      toast.success('test3');
    }, 80);

    setTimeout(() => {
      toast.success('test4');
    }, 160);

    setTimeout(() => {
      toast.success('test5');
    }, 240);

    setTimeout(() => {
      toast.success('test6');
    }, 320);
  },
  methods: {
    toastHandler() {
      toast.info('test1' + parseInt(Math.random() * 100, 10));
    },
  },
};
</script>

<template>
  <div>
    <button @click="toastHandler">toast by click</button>
  </div>
</template>