Vuetify 3 Layout Builder

#vue #vuetify #javascript

URL

https://vuetify-layout-builder.netlify.app/

MOTIVATION

I have been using Vuetify for a while now. I came across Quasar Layout Builder while searching for other design libraries. Inspired by its functionality, I decided to create a similar tool for Vuetify to streamline layout design and code generation.

FEATURES

Component Selection: In the first step, you can choose from various Vuetify layout components such as app bars, navigation drawers, and footers. This allows you to build the foundation of your layout quickly.
Customization: In the second step, you can customize the properties of each component. Adjust colors, sizes, and other settings to match your design needs, and see a live preview of the changes.
Code Generation: In the final step, generate the complete layout code based on your selections and customizations. This code can be directly integrated into your Vuetify project, saving you time and effort.

Let me know what you guys think!

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more