Troubleshooting

If you run into any issues while using the Page Builder, this section will help you diagnose and solve them. Check the tips below to quickly identify common problems and their solutions.

Fonts or Icons Not Displaying

If fonts or Material Icons are not displaying correctly, verify that:

CSS Import: You are importing the CSS file:

// Import the Page Builder styles once in your application entry, not in individual components.
import '@myissue/vue-website-page-builder/style.css'

Use with onMounted

Initialize Page Builder with onMounted Troubleshooting. If you encounter issues with the component not fully mounting, you can initialize the Page Builder inside Vue's onMounted lifecycle hook. This ensures it runs safely after the component is mounted.

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

const configPageBuilder = {
  updateOrCreate: {
    formType: 'create',
    formName: 'article',
  },
}

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