@myissue/vue-website-page-builder 3.4.69 → 3.4.76

package/README.md

@@ -19,23 +19,21 @@
   - [Installation](#installation)
   - [Quick Start](#quick-start)
   - [Nuxt Integration](#nuxt-integration)
-    - [1. Install the Package](#1-install-the-package)
-    - [2. Create a Nuxt Plugin](#2-create-a-nuxt-plugin)
-    - [3. Register the Plugin in `nuxt.config.ts`](#3-register-the-plugin-in-nuxtconfigts)
-    - [4. Using the Page Builder Component](#4-using-the-page-builder-component)
-    - [5. Why Initialize the Page Builder with `onMounted` in Nuxt?](#5-why-initialize-the-page-builder-with-onmounted-in-nuxt)
-  - [Vue Integration](#vue-integration)
-    - [1. Install the Package](#1-install-the-package-1)
-    - [2. Import and use the Page Builder Plugin](#2-import-and-use-the-page-builder-plugin)
+    - [1. Create a Nuxt Plugin](#1-create-a-nuxt-plugin)
+    - [2. Register the Plugin in `nuxt.config.ts`](#2-register-the-plugin-in-nuxtconfigts)
     - [3. Using the Page Builder Component](#3-using-the-page-builder-component)
-    - [4. Initialize Page Builder with `onMounted` Troubleshooting](#4-initialize-page-builder-with-onmounted-troubleshooting)
+    - [4. Why Initialize the Page Builder with `onMounted` in Nuxt?](#4-why-initialize-the-page-builder-with-onmounted-in-nuxt)
+  - [Vue Integration](#vue-integration)
+    - [1. Import and use the Page Builder Plugin](#1-import-and-use-the-page-builder-plugin)
+    - [2. Using the Page Builder Component](#2-using-the-page-builder-component)
+    - [3. Initialize Page Builder with `onMounted` Troubleshooting](#3-initialize-page-builder-with-onmounted-troubleshooting)
   - [Why Use the Shared Instance?](#why-use-the-shared-instance)
   - [Important: CSS Prefixing (`pbx-`)](#important-css-prefixing-pbx-)
   - [Rendering HTML Output in Other Frameworks (React, Nuxt, etc.)](#rendering-html-output-in-other-frameworks-react-nuxt-etc)
   - [Providing Configuration to the Page Builder](#providing-configuration-to-the-page-builder)
   - [Comprehensive Language Support in the Page Builder](#comprehensive-language-support-in-the-page-builder)
-    - [Default language](#default-language)
-    - [Disabling the Language Dropdown](#disabling-the-language-dropdown)
+      - [Default language](#default-language)
+      - [Disabling the Language Dropdown](#disabling-the-language-dropdown)
   - [Local Storage \& Auto-Save](#local-storage--auto-save)
   - [Retrieving the Latest HTML Content for Form Submission](#retrieving-the-latest-html-content-for-form-submission)
     - [Resetting the Builder After Successful Resource Creation or Update](#resetting-the-builder-after-successful-resource-creation-or-update)
@@ -65,7 +63,7 @@
 
 ## Demo
 
-A Vue 3 Page Builder component with drag-and-drop functionality for creating dynamic web pages.
+Vue 3 Page Builder component with drag-and-drop functionality for creating dynamic web pages.
 
 Try the live demo to explore real-time visual updates and smooth content management.
 <br>
@@ -230,13 +228,7 @@ To use `@myissue/vue-website-page-builder` in your Nuxt 3 or Nuxt 4 project, fol
 > **🎉 Great news:** The Page Builder now works with Nuxt 3 and Nuxt 4.  
 > Follow the steps below to get started in your Nuxt project.
 
-### 1. Install the Package
-
-```bash
-npm install @myissue/vue-website-page-builder
-```
-
-### 2. Create a Nuxt Plugin
+### 1. Create a Nuxt Plugin
 
 In the root, create a file named:
 
@@ -256,7 +248,7 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-### 3. Register the Plugin in `nuxt.config.ts`
+### 2. Register the Plugin in `nuxt.config.ts`
 
 Make sure Nuxt knows about your new Plugin by adding it to your config:
 
@@ -270,7 +262,7 @@ export default defineNuxtConfig({
 })
 ```
 
-### 4. Using the Page Builder Component
+### 3. Using the Page Builder Component
 
 Now anywhere in your application, use the `getPageBuilder()` composable to interact with the Page Builder’s shared instance.
 
@@ -310,7 +302,7 @@ onMounted(async () => {
 > **Tip:**  
 > By initializing the builder inside `onMounted`, you ensure everything is ready and avoid hydration errors.
 
-### 5. Why Initialize the Page Builder with `onMounted` in Nuxt?
+### 4. Why Initialize the Page Builder with `onMounted` in Nuxt?
 
 In a Server-Side Rendering (SSR) framework like Nuxt, any code that depends on the browser (`DOM`, `window`, `localStorage`, etc.) should only run on the client. Using `onMounted` ensures the Page Builder initializes safely after the component is mounted, avoiding SSR errors. Many popular packages follow this pattern.
 
@@ -318,13 +310,7 @@ In a Server-Side Rendering (SSR) framework like Nuxt, any code that depends on t
 
 To use `@myissue/vue-website-page-builder` in your Vue project, follow these steps:
 
-### 1. Install the Package
-
-```bash
-npm install @myissue/vue-website-page-builder
-```
-
-### 2. Import and use the Page Builder Plugin
+### 1. Import and use the Page Builder Plugin
 
 Import the `pageBuilder` Plugin and register it in your application entry point (e.g., `main.ts` or `main.js`). This sets up a single, shared Page Builder instance for your entire app.
 
@@ -341,7 +327,7 @@ app.use(pageBuilder)
 app.mount('#app')
 ```
 
-### 3. Using the Page Builder Component
+### 2. Using the Page Builder Component
 
 Now anywhere in your application, use the `getPageBuilder()` composable to interact with the Page Builder’s shared instance.
 
@@ -349,6 +335,7 @@ You’re now ready to use the Page Builder in your Vue pages or components with
 
 ```vue
 <script setup>
+import { onMounted } from 'vue'
 import { PageBuilder, getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
@@ -358,10 +345,12 @@ const configPageBuilder = {
   },
 }
 
-const pageBuilderService = getPageBuilder()
-const result = await pageBuilderService.startBuilder(configPageBuilder)
-
-console.info('You may inspect this result for message, status, or error:', result)
+// 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>
 
 <template>
@@ -369,7 +358,7 @@ console.info('You may inspect this result for message, status, or error:', resul
 </template>
 ```
 
-### 4. Initialize Page Builder with `onMounted` Troubleshooting
+### 3. 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.
 
@@ -481,6 +470,7 @@ Your `configPageBuilder` object can include:
 
 ```vue
 <script setup>
+import { onMounted } from 'vue'
 import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
@@ -507,11 +497,12 @@ const configPageBuilder = {
   },
 }
 
-// Retrieve Page Builder service instance
 const pageBuilderService = getPageBuilder()
-const result = await pageBuilderService.startBuilder(configPageBuilder)
 
-console.info('You may inspect this result for message, status, or error:', result)
+onMounted(async () => {
+  const result = await pageBuilderService.startBuilder(configPageBuilder)
+  console.info('You may inspect this result for message, status, or error:', result)
+})
 </script>
 
 <template>
@@ -535,6 +526,8 @@ The Page Builder offers robust multilingual support, enabling you to reach a glo
 | German               | de      |
 | Arabic               | ar      |
 | Hindi                | hi      |
+| Danish               | da      |
+| Italian              | it      |
 
 #### Default language
 
@@ -607,6 +600,7 @@ Call this logic when you need to submit or save the builder’s output—for exa
 
 ```vue
 <script setup>
+import { onMounted } from 'vue'
 import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
@@ -616,12 +610,19 @@ const configPageBuilder = {
   },
 }
 
-// Retrieve Page Builder service instance
 const pageBuilderService = getPageBuilder()
-await pageBuilderService.startBuilder(configPageBuilder)
 
-const storedComponents = pageBuilderService.getSavedPageHtml()
-yourForm.content = storedComponents
+onMounted(async () => {
+  const result = await pageBuilderService.startBuilder(configPageBuilder)
+  console.info('You may inspect this result for message, status, or error:', result)
+})
+
+const getComponents = function () {
+  const storedComponents = pageBuilderService.getSavedPageHtml()
+  yourForm.content = storedComponents
+}
+
+// Call getComponents when needed.
 </script>
 ```
 
@@ -658,6 +659,7 @@ If you have previously saved or published HTML content (for example, from your d
 
    ```vue
    <script setup>
+   import { onMounted } from 'vue'
    import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
    // Retrieve the Page Builder service instance
@@ -676,10 +678,13 @@ If you have previously saved or published HTML content (for example, from your d
      pageSettings: pageSettings,
    }
 
-   // Start the builder with both config and components
-   const result = await pageBuilderService.startBuilder(configPageBuilder, components)
+   const pageBuilderService = getPageBuilder()
 
-   console.info('You may inspect this result for message, status, or error:', result)
+   // 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>
@@ -707,6 +712,7 @@ If a draft is found, users are prompted to either continue where they left off o
 
 ```vue
 <script setup>
+import { onMounted } from 'vue'
 import { getPageBuilder } from '@myissue/vue-website-page-builder'
 
 const configPageBuilder = {
@@ -716,9 +722,13 @@ const configPageBuilder = {
   },
 }
 
-const result = await pageBuilderService.startBuilder(configPageBuilder)
+const pageBuilderService = getPageBuilder()
 
-console.info('You may inspect this result for message, status, or error:', result)
+// 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>