@myissue/vue-website-page-builder 3.4.20 → 3.4.22

package/README.md

@@ -21,9 +21,7 @@
     - [Initializing the Page Builder](#initializing-the-page-builder)
     - [Nuxt 3 Integration](#nuxt-3-integration)
       - [Create a Nuxt Plugin](#create-a-nuxt-plugin)
-      - [Register the Plugin in nuxt.config.ts](#register-the-plugin-in-nuxtconfigts)
-    - [Why Use the Shared Instance?](#why-use-the-shared-instance)
-    - [Using the Page Builder Component](#using-the-page-builder-component)
+    - [Why Use the Shared Instance? By always accessing the shared instance, you avoid creating](#why-use-the-shared-instance-by-always-accessing-the-shared-instance-you-avoid-creating)
   - [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)
@@ -245,18 +243,21 @@ app.mount('#app')
 
 To use `@myissue/vue-website-page-builder` in a Nuxt 3 project, follow these steps:
 
+```bash
+npm install @myissue/vue-website-page-builder
+```
+
 #### Create a Nuxt Plugin
 
 Create a file:
 
 ```
-app/plugins/page-builder.client.js
+plugins/page-builder.client.js
 ```
 
 Add:
 
 ```javascript
-import { defineNuxtPlugin } from '#app'
 import { pageBuilder } from '@myissue/vue-website-page-builder'
 import '@myissue/vue-website-page-builder/style.css'
 
@@ -265,29 +266,26 @@ export default defineNuxtPlugin((nuxtApp) => {
 })
 ```
 
-#### Register the Plugin in nuxt.config.ts
+Uusing the component:
 
-```typescript
-export default defineNuxtConfig({
-  plugins: ['~/plugins/page-builder.client.js'],
-})
+```vue
+<template>
+  <client-only>
+    <PageBuilder />
+  </client-only>
+</template>
 ```
 
-### Why Use the Shared Instance?
+### Why Use the Shared Instance? By always accessing the shared instance, you avoid creating
 
-By always accessing the shared instance, you avoid creating multiple, isolated copies of the builder. This prevents data inconsistencies, synchronization issues, and unpredictable behavior. All components and modules interact with the same centralized service, ensuring that updates and state changes are reflected everywhere in your application.
+multiple, isolated copies of the builder. This prevents data inconsistencies, synchronization
+issues, and unpredictable behavior. All components and modules interact with the same centralized
+service, ensuring that updates and state changes are reflected everywhere in your application. ###
+Using the Page Builder Component Ensure the following configuration options are set: - **`formType`
+(required):** Indicates whether you are creating or updating a resource. This is used to retrieve
+the correct content from local storage. - **`formName` (required):** Specifies the resource type
+(for example, `article`, `jobPost`, `store`, etc.). ```vue
 
-### Using the Page Builder Component
-
-Ensure the following configuration options are set:
-
-- **`formType` (required):**
-  Indicates whether you are creating or updating a resource. This is used to retrieve the correct content from local storage.
-
-- **`formName` (required):**
-  Specifies the resource type (for example, `article`, `jobPost`, `store`, etc.).
-
-```vue
 <script setup>
 import { PageBuilder, getPageBuilder } from '@myissue/vue-website-page-builder'
 import '@myissue/vue-website-page-builder/style.css'
@@ -308,7 +306,7 @@ console.info('You may inspect this result for message, status, or error:', resul
 <template>
   <PageBuilder />
 </template>
-```
+````
 
 ## Important: CSS Prefixing (`pbx-`)
 

package/dist/vue-website-page-builder.js

@@ -25130,7 +25130,7 @@ const Zk = ["src"], eC = {
 }, UE = { class: "pbx-overflow-hidden pbx-shadow pbx-ring-1 pbx-ring-black pbx-ring-opacity-5 md:pbx-rounded-lg" }, WE = { class: "pbx-overflow-x-auto" }, KE = { class: "pbx-w-max" }, GE = { class: "pbx-bg-white pbx-divide-y pbx-divide-gray-200" }, JE = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, YE = { class: "pbx-min-w-[30rem] pbx-w-max" }, QE = { key: 0 }, XE = { key: 1 }, ZE = { key: 0 }, e3 = { class: "pbx-px-6 pbx-py-4 pbx-whitespace-nowrap pbx-text-sm pbx-text-gray-500" }, t3 = { class: "pbx-min-w-[30rem] pbx-w-max" }, n3 = { class: "pbx-inline-flex pbx-items-center pbx-px-2.5 pbx-py-0.5 pbx-rounded-full pbx-text-xs pbx-font-medium" }, r3 = { class: "pbx-mt-4 pbx-mb-4 pbx-py-8 pbx-px-2 pbx-border pbx-border-solid pbx-border-gray-600 pbx-rounded-xl" }, i3 = { class: "pbx-mt-4 pbx-whitespace-pre-wrap pbx-text-white pbx-overflow-hidden pbx-bg-gray-900" }, s3 = { class: "pbx-px-4 pbx-pb-8 pbx-pt-4 pbx-text-white pbx-text-xs pbx-break-all" }, o3 = { class: "pbx-myPrimaryParagraph pbx-text-xs pbx-text-white" }, l3 = {
   __name: "PageBuilderSettings",
   setup(n) {
-    const e = "3.4.20", t = ke, r = I(() => t.getPageBuilderConfig);
+    const e = "3.4.22", t = ke, r = I(() => t.getPageBuilderConfig);
     return (i, s) => {
       var o, l, a, p, c, u, f, h, b, x, m, v, S, k, g, O;
       return w(), M("div", AT, [