vue.js GUI generator
Create mockups and code in one go!
- Mockup / UI design
- Mouse and Keyboard combinations support in editor
- Responsive preview (phone, tablet, web)
- Basic set of HTML5 elements
- Material design components (vue-mdc-adapter)
- Vuejs sources generation (download .zip)
- Connect with GitHub (save/load vuegg projects)
- Local persistence
- // WIP
-
Mouse down + Drag + Mouse up: Draw a selection area*
-
[Ctrl or Meta] + Click: Select outer-most item, or parent container*
-
[Ctrl or Meta] + Shift + Click: Add [outer-most] item to selection
-
Esc: Clear selection
(* These options will only select the outer-most items, or direct page children)
- [Ctrl or Meta] + z: Undo
- [Ctrl or Meta] + Shift + z: Redo
- [Ctrl or Meta] + c: Copy
- [Ctrl or Meta] + x: Cut
- [Ctrl or Meta] + v: paste
- [Delete or Backspace]
Vuegg is a work-in-progress concept project, feel free to fork it or contribute however possible.
The project was born as a sandbox for me to get started on the vue world, in fact its unoriginal name was vuexample (very unique, I thought at the time).
Not long after it became a personal challenge, I went on adding new features (mainly things I feel like learning) and gave it a proper name (and even a face). Eventually I considered it to be ready for the open-source community... and here is vuegg, my pet project.
# install, build and serve
npm run vuegg
Navigate to localhost:5000
to serve (a production-ready) vuegg.
# install client & server dependencies
npm run install:all
# OR install only client / server
npm run install:client
npm run install:server
# 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).
For detailed explanation on how things work on the client side, checkout the vuejs-templates/webpack guide and docs for vue-loader.
For development vuegg-server will only generate vuejs projects (it won't be serving vuegg-client resources). Auto-restart capabilities possible thanks to nodemon.
The above commands should be run in separate terminal instances.
# 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.