34 lines
954 B
Vue
34 lines
954 B
Vue
|
<template>
|
||
|
|
<DocSectionText v-bind="$attrs">
|
||
|
|
<p>Toast component is controlled via the <i>ToastService</i> that needs to be installed as an application plugin.</p>
|
||
|
|
<DocSectionCode :code="code1" lang="script" />
|
||
|
|
<p>Recommended location of a Toast is the main application template.</p>
|
||
|
|
<DocSectionCode :code="code2" />
|
||
|
|
<p>The <i>useToast</i> composable can be accessed anywhere within your application to interact with the component.</p>
|
||
|
|
<DocSectionCode :code="code3" />
|
||
|
|
</DocSectionText>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
const code1 = ref(`import {createApp} from 'vue';
|
||
|
|
import ToastService from 'primevue/toastservice';
|
||
|
|
|
||
|
|
const app = createApp(App);
|
||
|
|
app.use(ToastService);
|
||
|
|
`);
|
||
|
|
|
||
|
|
const code2 = ref(`
|
||
|
|
<template>
|
||
|
|
<Toast />
|
||
|
|
</template>
|
||
|
|
`);
|
||
|
|
|
||
|
|
const code3 = ref(`
|
||
|
|
<script setup>
|
||
|
|
import { useToast } from 'primevue/usetoast';
|
||
|
|
|
||
|
|
const toast = useToast(); // instance to create messages
|
||
|
|
<\/script>
|
||
|
|
`);
|
||
|
|
</script>
|