DEV Community

Ameer Hamza
Ameer Hamza

Posted on

Vuetify 3 Layout Builder

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

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

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

  3. 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!

Top comments (0)