![\"Vue](\"./public/logo/logo.svg\"){kind=logo}
\n\n\n
![\"Vue](\"./public/home/for_read_me/vue3_page_builder_myissue.gif\")
\n\n## Guide & Documentation\n\nA Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies. And it is totally free.\n\nFind everything you need to get started, configure, and master the Vue Website Page Builder.\nThis section covers installation, requirements, quick start, advanced usage, and integration tips—so you can build and launch pages with confidence.\n\n[Open Guides & Docs](https://myissue-studio.github.io/vue-website-page-builder/)\n\nKey integration guides:\n\n- [Display Products (Ecommerce)](https://myissue-studio.github.io/vue-website-page-builder/display-products) — connect your catalog and insert product grids\n- [Custom Media Library](https://myissue-studio.github.io/vue-website-page-builder/custom-media-library) — wire your uploads, CDN, or DAM\n- [TypeScript Support](https://myissue-studio.github.io/vue-website-page-builder/typescript-support) — typed config, products, and services\n\n## Built for Ecommerce Admin & Multi-Tenant SaaS\n\nMost page builders are tied to one CMS, one storefront, or one cloud platform. This project is built for teams that already have a **Vue admin**, a **REST or GraphQL API**, and a **database** — and need a visual editor inside that product.\n\n**Best fit if you are building:**\n\n- **Ecommerce admin** — merchants edit landing pages, collection pages, and promotional blocks while your platform owns catalog, cart, and checkout\n- **Multi-tenant SaaS** — each customer gets branded pages; your app handles auth, billing, and tenancy; the builder outputs HTML you store per tenant\n- **Headless CMS / marketplace admin** — editors compose pages from blocks; your backend persists full HTML and serves it on the public site\n- **Agency & startup dashboards** — free, MIT-licensed, self-hosted; no vendor lock-in on hosting or storage\n\n**Why Vue teams choose this over generic builders:**\n\n- **Vue-native** — serious Vue 3 component with fewer integration compromises than dropping a React-only or iframe-based editor into a Nuxt or Laravel + Inertia app\n- **Integration-first** — inject `:CustomMediaLibraryComponent` and `:DisplayProducts` instead of being locked to one asset provider or product database\n- **Your backend stays in charge** — authentication, permissions, publishing, CDN, and checkout remain on your stack; the builder focuses on visual editing and portable HTML output\n\n[Live demo](https://mybuilder.dev) · [Display Products guide](https://myissue-studio.github.io/vue-website-page-builder/display-products)\n\n## Ecommerce Product Sections\n\nAdd product catalog blocks to any page — without WooCommerce shortcodes or rigid storefront widgets.\n\n**No integration required to start:** the **Products** button ships with a built-in **sample catalog** (placeholder items for layout and design) unless you set `:enableDefaultProducts=\"false\"`. Editors can insert product grids immediately and refine copy on the canvas.\n\nFor production, pass `:DisplayProducts` with your own picker — pagination, categories, API search, Shopify/WooCommerce feeds, and inventory all live in **your** component. It replaces the sample catalog inside the same modal.\n\n**What you get out of the box:**\n\n- **Your catalog UI** — search, categories, API pagination, Shopify/WooCommerce/custom ERP feeds (you implement the picker; we provide the hook)\n- **Built-in grid layouts** — `grid-1` through `grid-6`, mobile column options, card styles (clean, bordered, shadow, elevated), rounded product images\n- **Toolbar editing after insert** — change grid, mobile layout, and card style from the floating editor without re-inserting products\n- **Portable HTML** — sections include `data-pbx-product-section` and `data-pbx-product-id` for hydration or tracking on your storefront\n\n```vue\n\n\n\n \n ![\"Vue](\"./public/home/for_read_me/browser_boat.svg\")
\n\n## Get Started in Minutes\n\nEasy setup and instant productivity.\nFollow the [Quick Start](#quick-start) guide to begin building with just a few simple steps.\n\n---\n\n## About\n\nA Page Builder designed for growth. Build your website pages with ready-made components that are fully customizable and always responsive, designed to fit every need. A powerful Page Builder for growing merchants, brands, and agencies. And it is totally free.\n\n![\"Vue](\"./public/home/for_read_me/browser_components.svg\")
\n\n## Real-World Application Example\n\nThe Vue Website Page Builder is built for production admin products: merchants and editors design landing pages, collection pages, and campaign blocks while your platform owns catalog, checkout, auth, and hosting.\n\nA live reference implementation is **[myself.ae](https://myself.ae)** / **[mybuilder.dev](https://mybuilder.dev)** — a Vue-based visual editor with product sections, media integration, responsive components, and HTML persistence suitable for ecommerce and multi-tenant SaaS.\n\n**Typical production shape:**\n\n1. Embed `PageBuilder` in your Vue or Nuxt admin \n2. Inject your media library and product catalog \n3. Autosave drafts locally; publish full HTML to your API \n4. Serve that HTML on your storefront or marketing site behind your CDN \n\nThat model gives medium and large product teams what procurement usually asks for — **control of data, security boundaries, and deployment** — without replacing your existing CMS or commerce stack.\n\n\n ![\"myself.ae](\"./public/logo/top-companies/myself.ae.jpg\" "\\"myself.ae\\""){kind=logo}
\n \n ![\"Fashion](\"./public/logo/top-companies/zara.jpg\" "\\"Fashion"){kind=logo}
\n \n ![\"Retail](\"./public/logo/top-companies/hm.png\" "\\"Retail"){kind=logo}
\n \n ![\"Luxury](\"./public/logo/top-companies/chanel.avif\" "\\"Brand"){kind=logo}
\n
\n ![\"Apparel](\"./public/logo/top-companies/boss.jpg\" "\\"Apparel"){kind=logo}
\n \n ![\"Lifestyle](\"./public/logo/top-companies/dkny.jpg\" "\\"Lifestyle"){kind=logo}
\n \n ![\"Product](\"./public/logo/top-companies/aldo.jpg\" "\\"Collection"){kind=logo}
\n \n ![\"Youth](\"./public/logo/top-companies/bershka.jpg\" "\\"Marketing"){kind=logo}
\n
\n ![\"Accessories](\"./public/logo/top-companies/furla.jpg\" "\\"Brand"){kind=logo}
\n \n ![\"Jewelry](\"./public/logo/top-companies/pandora.jpg\" "\\"Ecommerce"){kind=logo}
\n \n ![\"Premium](\"./public/logo/top-companies/bottega_veneta.png\" "\\"Premium"){kind=logo}
\n \n ![\"Storefront](\"./public/logo/top-companies/charles_keith.jpg\" "\\"Editorial"){kind=logo}
\n
Industry examples of the page types teams build — fashion, retail, and brand landing pages — using a self-hosted Vue visual editor connected to their own catalog and CMS.
\n\n![\"Vue](\"./public/home/for_read_me/page_builder_architecture.svg\")
\n\n## Contributing\n\n1. Fork the repository.\n2. Create your feature branch.\n3. Make your changes.\n4. Build and test locally.\n5. Submit a pull request.\n\n## Security Vulnerabilities\n\nIf you discover a security vulnerability, please send us a message.\n\n## Get in Touch for Customization or Any Questions\n\nIf you have any questions or if you're looking for customization, feel free to connect with our developers.\n\n- [Contact](https://mybuilder.dev)\n\n## Report Issues or Request Features\n\nEncountered a bug, have suggestions, or need a new feature? Create a GitHub issue:\n\n- [Submit an Issue](https://github.com/myissue-studio/vue-website-page-builder/issues)\n\n## Feedback\n\nFeedback, suggestions or any issues you encounter while using this app. Feel free to reach out.\n\n- [Submit your testimonial here](https://github.com/myissue-studio/vue-website-page-builder/issues)\n\n## Support the Project\n\nWe would greatly appreciate it if you could star the GitHub repository. Starring the project helps to boost its visibility.\n\n## License\n\n[MIT License](./LICENSE)\n","readmeFilename":"README.md"}