<template> <DocSectionText v-bind="$attrs"> <p>Popup mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> method with an event of the target.</p> </DocSectionText> <div class="card flex justify-content-center"> <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /> <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" /> </div> <DocSectionCode :code="code" /> </template> <script> export default { data() { return { items: [ { label: 'Options', items: [ { label: 'Update', icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } } ] }, { label: 'Navigate', items: [ { label: 'Vue Website', icon: 'pi pi-external-link', url: 'https://vuejs.org/' }, { label: 'Router', icon: 'pi pi-upload', to: '/fileupload' } ] } ], code: { basic: ` <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /> <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" /> <Toast />`, options: ` <template> <div class="card flex justify-content-center"> <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /> <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" /> <Toast /> </div> </template> <script> export default { data() { return { items: [ { label: 'Options', items: [ { label: 'Update', icon: 'pi pi-refresh', command: () => { this.$toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', icon: 'pi pi-times', command: () => { this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } } ] }, { label: 'Navigate', items: [ { label: 'Vue Website', icon: 'pi pi-external-link', url: 'https://vuejs.org/' }, { label: 'Router', icon: 'pi pi-upload', to: '/fileupload' } ] } ] }; }, methods: { toggle(event) { this.$refs.menu.toggle(event); }, save() { this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); } }, }; <\/script>`, composition: ` <template> <div class="card flex justify-content-center"> <Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" /> <Menu ref="menu" id="overlay_menu" :model="items" :popup="true" /> <Toast /> </div> </template> <script setup> import { ref } from "vue"; import { useToast } from "primevue/usetoast"; const toast = useToast(); const menu = ref(); const items = ref([ { label: 'Options', items: [ { label: 'Update', icon: 'pi pi-refresh', command: () => { toast.add({ severity: 'success', summary: 'Updated', detail: 'Data Updated', life: 3000 }); } }, { label: 'Delete', icon: 'pi pi-times', command: () => { toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000 }); } } ] }, { label: 'Navigate', items: [ { label: 'Vue Website', icon: 'pi pi-external-link', url: 'https://vuejs.org/' }, { label: 'Router', icon: 'pi pi-upload', to: '/fileupload' } ] } ]); const toggle = (event) => { menu.value.toggle(event); }; const save = () => { toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000}); }; <\/script>` } }; }, methods: { toggle(event) { this.$refs.menu.toggle(event); }, save() { this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000 }); } } }; </script>