Use in Modal

Close Page Builder Without Saving in a Modal or Dialog. You can easily use the Page Builder inside a modal or dialog. To close the page builder without saving, or to allow users to close the modal from inside the builder, use the showCloseButton prop and listen for the @handleClosePageBuilder event:

<script setup>
import { onMounted, ref } from 'vue'
import { PageBuilder, getPageBuilder } from '@myissue/vue-website-page-builder'

const configPageBuilder = {
  updateOrCreate: {
    formType: 'update',
    formName: 'article',
  },
}
const showModal = ref(true)

function closePageBuilder() {
  showModal.value = false
}

const pageBuilderService = getPageBuilder()

// Initialize the Page Builder with `onMounted`
onMounted(async () => {
  const result = await pageBuilderService.startBuilder(configPageBuilder)
  console.info('You may inspect this result for message, status, or error:', result)
})
</script>

<template>
  <Modal v-if="showModal" @close="showModal = false">
    <PageBuilder :showCloseButton="true" @handleClosePageBuilder="closePageBuilder" />
  </Modal>
</template>