This repository is archived and will no longer be maintained. Please visit the new and actively maintained repository at:
https://github.com/qaiswardag/vue-website-page-builder
If you find this project useful or interesting, I would greatly appreciate if you could star ⭐ the GitHub repository. It helps to boost the project's visibility and encourages me to continue adding new features.
To star the repository, simply click on the Star button located at the top-right corner of the GitHub page. Thank you in advance for your support! 🙌
This app was born out of my desire to make a minimalst page builder with a elegant and intuitive design.
Play around with the page builder
Built using cutting-Edge Technologies and Frameworks. Developed with Vue 3, Vite, Vuex and Tailwind CSS.
Clone the repository locally:
git clone https://github.com/qaiswardag/vue-drag-and-drop-page-builder.git
Install packages:
npm install
Run App
npm run dev
Please note that these instructions assume you have PHP, Composer, and Node.js installed
-
Live Drag & Drop Builder: Easily drag and drop content on a page to bring it to life.
-
Technologies and Frameworks: Built using cutting-edge technologies like Vue 3, Vuex, Composition API, and Tailwind CSS.
-
Set Brand and Link Colors in One Place: Centralize the color settings and apply them across the entire platform effortlessly.
-
Mobile-First Approach: Developed with a Mobile-First approach to ensure a seamless experience on various devices.
-
Media Library: Enjoy a beautiful and user-friendly media library for easy image management and updates.
-
Minimal and Intuitive Design: Engage users with an elegant and intuitive design that enhances their visual experience.
I have separated all the logic for manipulating the HTML elements into its own Designer class, which can be found at the path: src/composables/Designer.js
.
Customizing the page builder is made simple since all the logic resides in the Designer Class.
Please note that if you want to use Unsplash, simply create an .env file in your root folder and enter your Unsplash API key and value.
Example: VITE_UNSPLASH_KEY="your-unsplash-api-key-here"
Get your unsplash api key here.
The Page builder's capabilities become infinite when integrated with a backend framework like Laravel or Express.js.
If you are familiar with Laravel, you can integrate the page builder with my open-source Laravel Admin Panel available at: Demo & repo.
By utilizing a backend Framework, the HTML components, currently stored in a JSON file at public/components.json
, can be easily stored in the database, resulting in better management of HTML components.
Thank you for considering contributing to this project!
If you discover a security vulnerability, please send me an e-mail.
If you have any questions, feel free to connect with me on LinkedIn and send me a message.
I would love to hear your feedback, suggestions, or any issues you encounter while using this app. Feel free to reach out to me if you have any questions or just want to say hello. You can connect with me through:
This project is open-sourced software licensed under the MIT license.