Merge pull request #460 from aceofwings/main

fix client side toasts

Author: mariusa

docs/.vuepress/client.ts

@@ -9,7 +9,7 @@ export default defineClientConfig({
     if (!__VUEPRESS_SSR__) {
       const {BootstrapVue3, BToastPlugin} = await import('../../dist/bootstrap-vue-3.es')
       app.use(BootstrapVue3)
-      app.use(BToastPlugin)
+      app.use(BToastPlugin, {BToast: {injectkey: 'toast'}})
       app.component('doc-reference', DocReference)
     }
   },

docs/components/Toast.md

@@ -135,10 +135,13 @@ Toasts can be displayed as variants thru various helper methods or be set in `To
 </ClientOnly>
 
 <script lang='ts' setup>
-  import {ref, computed} from 'vue';
+  import {ref, computed, inject} from 'vue';
   import {useToast} from 'bootstrap-vue-3';
+  let toast = null
+
+  if (!__VUEPRESS_SSR__) {
+       toast = inject("toast").useToast()
 
-  // let toast = useToast()
 
   let show1 = () => {toast.show({title: 'example title'})};
   let show2 = () => {toast.show({title: 'example title', body: "This is a toast"}, {variant: 'info'})};
@@ -147,4 +150,5 @@ Toasts can be displayed as variants thru various helper methods or be set in `To
   let variantshow2 = () => {toast.show({title: 'New Message', body: "This is a toast"}, {pos: 'bottom-right', variant: 'info'})};
   let variantshow3 = () => {toast.show({title: 'Warning for Item', body: "Please check list"},{pos: 'bottom-right', variant: 'warning'})};
   let variantshow4 = () => {toast.show({title: 'Event Created!', body: "Bootstrap Event"},{pos: 'bottom-right', variant: 'success'})};
+  }
 </script>

src/components/BToast/plugin.ts

@@ -179,13 +179,20 @@ export class ToastController {
 
 // default global inject key to fetch the controller
 const injectkey = Symbol()
+const fetchKey = Symbol()
+
 const rootkey = 'root' // TODO: I guess this variable is not used in any place...
 
 const defaults = {
   container: undefined,
   toasts: [],
   root: false,
 }
+
+export function getKey(): any {
+  return inject(fetchKey)
+}
+
 export function useToast(): ToastInstance | undefined
 export function useToast(vm: {id: symbol}, key?: symbol): ToastInstance | undefined
 export function useToast(
@@ -195,7 +202,7 @@ export function useToast(
 
 export function useToast(vm?: any, key: symbol = injectkey): ToastInstance | undefined {
   //let's get our controller to fetch the toast instance
-  const controller = inject(key !== null ? key : injectkey) as ToastController
+  const controller = inject(getKey()) as ToastController
 
   // not parameters passed, use root if defined
   if (!vm) {
@@ -211,6 +218,7 @@ export function useToast(vm?: any, key: symbol = injectkey): ToastInstance | und
 
 export const BToastPlugin: Plugin = {
   install: (app: App, options: BootstrapVueOptions = {}) => {
+    app.provide(fetchKey, options?.BToast?.injectkey ?? injectkey)
     app.provide(options?.BToast?.injectkey ?? injectkey, new ToastController())
   },
 }