Intro

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! 🙌

About and demo

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

Technologies and Frameworks

Built using cutting-Edge Technologies and Frameworks. Developed with Vue 3, Vite, Vuex and Tailwind CSS.

Installation

Getting started

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

Required Software Installation

Please note that these instructions assume you have PHP, Composer, and Node.js installed

Features

• 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.

Documentation

Customizing the page builder

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.

Unsplash

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.

Use with Backend

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.

Contributing

Thank you for considering contributing to this project!

Security Vulnerabilities

If you discover a security vulnerability, please send me an e-mail.

Get in Touch

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:

• Email
• LinkedIn

License

This project is open-sourced software licensed under the MIT license.