@myissue/vue-website-page-builder 3.5.11 → 3.5.13

package/README.md

@@ -7,6 +7,8 @@
 - [Free Click \& Drop Page Builder](#free-click--drop-page-builder)
   - [Demo](#demo)
   - [Guide \& Documentation](#guide--documentation)
+  - [Backend and CMS Integration](#backend-and-cms-integration)
+  - [Why Choose This Vue Page Builder](#why-choose-this-vue-page-builder)
   - [Overview](#overview)
   - [Get Started in Minutes](#get-started-in-minutes)
   - [About](#about)
@@ -45,6 +47,69 @@ This section covers installation, requirements, quick start, advanced usage, and
 
 [Open Guides & Docs](https://myissue-studio.github.io/vue-website-page-builder/)
 
+## Backend and CMS Integration
+
+This Vue page builder is designed for real CMS, SaaS, marketplace, blog, job board, listing, and ecommerce admin workflows. The editor uses browser local storage for draft recovery and autosave, but production persistence belongs to your backend.
+
+Recommended production flow:
+
+1. Start the builder with your config:
+
+```ts
+await pageBuilderService.startBuilder(configPageBuilder)
+```
+
+2. Save the full page HTML to your backend:
+
+```ts
+const content = pageBuilderService.getSavedPageHtml()
+await api.updatePost(post.id, { content })
+```
+
+3. Edit existing backend content later:
+
+```ts
+const { components, pageSettings } = pageBuilderService.parsePageBuilderHTML(post.content)
+
+await pageBuilderService.startBuilder(
+  {
+    ...configPageBuilder,
+    updateOrCreate: {
+      formType: 'update',
+      formName: 'article',
+    },
+    pageSettings,
+  },
+  components,
+)
+```
+
+Store the complete HTML string, including the outer `#pagebuilder` wrapper:
+
+```html
+<div id="pagebuilder" class="pbx-bg-red-500" style="letter-spacing: 2px;">
+  <section data-component-title="Hero">...</section>
+  <section data-component-title="Content">...</section>
+</div>
+```
+
+The wrapper stores global page styles. The sections store editable components. This makes the builder easy to use with Laravel, Rails, Django, Express, Nuxt, headless CMS platforms, custom admin panels, and any API-backed product.
+
+## Why Choose This Vue Page Builder
+
+Many page builders are heavy, opinionated, or tied to one CMS. This project focuses on a different use case: a lightweight Vue 3 page builder that you can embed inside your own product, connect to your own backend, and style for your own brand.
+
+- **Backend-first persistence**: local storage is used for draft recovery, while your database stores the published full HTML.
+- **Portable HTML output**: saved content is standard HTML with a `#pagebuilder` wrapper and direct `<section>` children.
+- **Works with existing systems**: integrate with custom CMS dashboards, SaaS admin panels, marketplaces, job boards, blogs, and ecommerce content tools.
+- **Vue-native integration**: use the `PageBuilder` component and `getPageBuilder()` service directly in Vue or Nuxt projects.
+- **Bring your own media library**: inject your own media picker, storage URLs, and upload flow instead of being locked into one asset provider.
+- **Global page styles included**: `pageSettings` can be saved and restored with the page, so editing existing posts keeps fonts, colors, backgrounds, and spacing.
+- **No Tailwind setup required**: the package ships the needed prefixed styles and avoids class conflicts with your app.
+- **Open and customizable**: MIT licensed, component-driven, and practical for teams that need control over the editing experience.
+
+This is a general-purpose builder by design. It does not try to replace your backend, authentication, permissions, CDN, or publishing workflow. It gives your product a visual editor while letting your platform stay in charge of data, scale, security, and deployment.
+
 ## Overview
 
 If you're a Vue 3 developer, this builder feels right at home. It installs quickly via npm and supports full customization through props and configuration objects. You can even set specific user settings like image, name, theme, language, company logo, and autosave preferences, making it a personalized experience for every user.
@@ -161,7 +226,7 @@ The Page Builder is packed with features:
 - **True Visual Editing**: See your changes in real-time as you make them.
 - **Media Library**: Easily inject your own custom media library component.
 - **Advanced Sliders & Carousels**: Build responsive image and content sliders with autoplay, navigation controls, touch support, and full customization options.
-- **Local Storage & Auto-Save**: Never lose your work—changes are saved as you go.
+- **Draft Recovery & Auto-Save**: Never lose in-progress work—changes are saved locally as a draft while your backend stores published HTML.
 - **Unsplash**: Unsplash integration.
 - **Responsive Editing**: Ensure your site looks great on all devices.
 - **Text Editing**: Edit text content live and in real-time.
@@ -216,8 +281,7 @@ If you discover a security vulnerability, please send us a message.
 
 If you have any questions or if you're looking for customization, feel free to connect with our developers.
 
-- [Email](mailto:qais.wardag@outlook.com)
-- [LinkedIn](https://www.linkedin.com/in/qaiswardag)
+- [Contact](https://mybuilder.dev)
 
 ## Report Issues or Request Features
 

package/dist/services/PageBuilderService.d.ts

@@ -121,9 +121,8 @@ export declare class PageBuilderService {
      */
     globalPageStyles(): Promise<void>;
     /**
-     * Disconnects the MutationObserver that syncs global page style changes across
-     * all [data-pagebuilder-content] section wrappers. Call when closing the global
-     * styles editor panel.
+     * Disconnects the MutationObserver that tracks global page style changes.
+     * Call when closing the global styles editor panel.
      */
     stopGlobalStylesSync(): void;
     /**
@@ -184,13 +183,12 @@ export declare class PageBuilderService {
     selectedComponentIsFullWidth(): boolean;
     setSelectedComponentFullWidth(enabled: boolean): Promise<void>;
     /**
-     * Returns true when the global page wrapper (all [data-pagebuilder-content] elements)
-     * has the full-width class applied, meaning every section's background stretches edge-to-edge.
+     * Returns true when the global page wrapper has the full-width class applied.
      */
     isGlobalFullWidth(): boolean;
     /**
-     * Toggles the full-width class on every [data-pagebuilder-content] wrapper so that
-     * global background colours stretch across the entire browser viewport.
+     * Toggles the full-width class on the page wrapper so that global background
+     * colours stretch across the entire browser viewport.
      */
     setGlobalFullWidth(enabled: boolean): Promise<void>;
     /** Returns true when the currently selected element is an `<img>`. */
@@ -531,25 +529,24 @@ export declare class PageBuilderService {
     private removeCurrentComponentsFromLocalStorage;
     /**
      * Handles the form submission process, clearing local storage and the DOM.
-     * Global page settings (classes / inline styles on the content wrapper) are
+     * Global page settings (classes / inline styles on the page wrapper) are
      * intentionally preserved so they survive a "remove all components" action.
      * @returns {Promise<void>}
      */
     handleFormSubmission(): Promise<void>;
     /**
      * Reads the current page settings.
-     * Prioritises the live DOM (always current) and falls back to localStorage
-     * if there are no [data-pagebuilder-content] elements.
+     * Prioritises the live #pagebuilder element (always current) and falls back to localStorage.
      */
     private readCurrentPageSettings;
-    /** Applies captured global page classes/styles to every section wrapper. */
-    private applyPageSettingsToAllWrappers;
-    /** Reconnects the global-styles MutationObserver after a Vue remount replaces wrapper nodes. */
+    /** Applies captured global page classes/styles to the page wrapper once. */
+    private applyPageSettingsToPage;
+    /** Reconnects the global-styles MutationObserver after a Vue remount replaces nodes. */
     private reconnectGlobalStylesObserver;
     /**
      * Updates the component store and re-renders the page without losing global page
-     * styles on [data-pagebuilder-content]. setComponents clears wrappers first, so
-     * settings must be captured before the remount and re-applied after Vue renders.
+     * styles on #pagebuilder. Settings must be captured before the remount and
+     * re-applied after Vue renders.
      */
     private setComponentsPreservingPageSettings;
     /**

package/dist/stores/page-builder-state.d.ts

@@ -235,6 +235,15 @@ export declare const usePageBuilderStateStore: import('pinia').StoreDefinition<"
                 autoSave?: boolean | undefined;
                 notifications?: boolean | undefined;
                 fontFamily?: string | undefined;
+                elementFonts?: {
+                    h1?: string | undefined;
+                    h2?: string | undefined;
+                    h3?: string | undefined;
+                    h4?: string | undefined;
+                    h5?: string | undefined;
+                    h6?: string | undefined;
+                    p?: string | undefined;
+                } | undefined;
             } | null | undefined;
             settings?: {
                 [x: string]: unknown;