Vuegg: GUI Generator powered by Vue.js

Vue GUI Generator - vuegg

Vuegg the Vue GUI Generator helps create mockups & code in one go. Scaffold projects by dragging-dropping components directly into the visual editor and moving-resizing them to your choice. Vuegg leverages the creation of the pages and routes of your app/website, eases the styling work and helps to achieve a rapid-prototyping workflow. You can change the material theme, preview what you have created, add pages, name them and define the URLs, style your elements and pages and whenever you're happy just download your project and get your code.

The aim of this project is to merge designing and prototyping into one single process. Whenever you're happy with what you see on the screen, just get your code.

Features

  • Mockup / prototype by drag'n'drop components and move/resize them
  • Support for standard Mouse and Keyboard combinations
  • Responsive preview (phone, tablet, web)
  • Basic set of HTML5 elements
  • Material design components
  • Vuejs sources generation
  • Connect with GitHub (save/load vuegg projects)
  • Local persistence to save the work in progress

Vuegg is a work-in-progress concept project.

Running vuegg locally

Although Vuegg can be found online, you can run it also locally following the steps below:

Auto-run

# install, build and serve
npm run vuegg

Navigate to localhost:5000 to serve (a production-ready) vuegg.

Step-by-step setup

1. installation

# install client & server dependencies
npm run install:all

# OR install only client / server
npm run install:client
npm run install:server

2. development

# serve vuegg-client with hot reload
npm run client

# start vuegg-server (auto-restarts on changes)
npm run server

Navigate to localhost:8080 to serve vuegg-client with hot-reload (development server).

3. production

# build vuegg-client for production with minification
npm run build

# start vuegg-server at localhost:5000
npm run start

Navigate to localhost:5000 to serve (a production-ready) vuegg.

You can consult the docs page for more.

If you are looking for more complete solutions on Material Design including Bootstrap 4, take a look at the Material Kit by Creative-Tim.

This project is maintend by Alex Perez, under the MIT licence.