-
|
What you are trying to do. I would like to use a seperate class, lets call it ToastHelper that handles all my toasts. Any error messages you are getting. Environment (please complete the following information):
Is there any way to achieve that goal? |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
Hi @boindil , As But you can nest composables to probably achieve what you want (reuse the same configuration across multiple components). Say you create a import { useToast } from 'bootstrap-vue-next';
export function useSuccessToast() {
const toast = useToast();
const showSuccessToast = () =>
toast.show?.({ props: { title: 'Hello', body: 'World' } });
return { show: showSuccessToast };
}And use your own <template>
<BButton @click="onClickDiv">
{{ msg }}
</BButton>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useSuccessToast } from './TestToast';
const toast = useSuccessToast();
const msg = ref('Comp');
const onClickDiv = () => {
toast.show();
};
</script>
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @sceee, thranks, thats working great! What I was wondering is whether its not possible to output html (or elements using I tried using a simple |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
Hi @boindil ,
As
useToastis a composable, it "should only be called in<script setup>or thesetup()hook."But you can nest composables to probably achieve what you want (reuse the same configuration across multiple components).
Say you create a
ToastHelper.tswith the following content:And use your own
useSuccessToastcomposable in your components: