{"id":13510288,"url":"https://github.com/alxpez/vuegg","last_synced_at":"2025-09-29T02:32:04.023Z","repository":{"id":41383211,"uuid":"121494170","full_name":"alxpez/vuegg","owner":"alxpez","description":"dnd visual editor - mockups and code in one go!","archived":true,"fork":false,"pushed_at":"2023-03-01T15:39:55.000Z","size":2839,"stargazers_count":2344,"open_issues_count":35,"forks_count":391,"subscribers_count":98,"default_branch":"master","last_synced_at":"2025-01-12T01:02:33.093Z","etag":null,"topics":["drag","drop","generator","gui","mdc","prototyping","rapid","resize","vue","vuegg"],"latest_commit_sha":null,"homepage":"https://vuegg.github.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alxpez.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"github":["alxpez"],"patreon":"alxpez","custom":"https://www.buymeacoffee.com/alxpez"}},"created_at":"2018-02-14T09:46:53.000Z","updated_at":"2025-01-03T13:07:46.000Z","dependencies_parsed_at":"2023-01-24T01:00:16.956Z","dependency_job_id":"555bfbe1-099d-4047-85a5-274a664e028a","html_url":"https://github.com/alxpez/vuegg","commit_stats":null,"previous_names":["vuegg/vuegg"],"tags_count":40,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alxpez%2Fvuegg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alxpez%2Fvuegg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alxpez%2Fvuegg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alxpez%2Fvuegg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alxpez","download_url":"https://codeload.github.com/alxpez/vuegg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234465646,"owners_count":18837991,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag","drop","generator","gui","mdc","prototyping","rapid","resize","vue","vuegg"],"created_at":"2024-08-01T02:01:32.150Z","updated_at":"2025-09-29T02:31:58.548Z","avatar_url":"https://github.com/alxpez.png","language":"JavaScript","funding_links":["https://github.com/sponsors/alxpez","https://patreon.com/alxpez","https://www.buymeacoffee.com/alxpez","https://www.patreon.com/bePatron?u=10700791"],"categories":["JavaScript","vue"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://vuegg.github.io/\" target=\"_blank\"\u003e\n    \u003cimg width=\"180\" src=\"https://vuegg.github.io/static/vuegg-fam.svg\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003evuegg\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\u003cstrong\u003evue\u003c/strong\u003e.js \u003cstrong\u003eG\u003c/strong\u003eUI \u003cstrong\u003eg\u003c/strong\u003eenerator\u003c/p\u003e\n\u003cp align=\"center\"\u003e[ Mockups and code in one go! ]\u003c/p\u003e\n\n\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vuejs/vue\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/vue-%5E2.5-41b883.svg?longCache=true\" alt=\"vuejs\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/vuegg/vuegg/branches\"\u003e\n    \u003cimg src=\"https://api.travis-ci.org/vuegg/vuegg.svg?longCache=true\" alt=\"travis-ci\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/vuegg/vuegg/blob/master/LICENSE\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/license-MIT-green.svg?longCache=true\" alt=\"MIT\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/vuegg/vuegg#donate\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/%E2%9D%A4%EF%B8%8Fdonate-red.svg?longCache=true\" alt=\"donate\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003c/br\u003e\n\n## About vuegg\n\nScaffold vuejs 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 (... at least in theory).\n\nThe 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.\n\n\u003c/br\u003e\n\n\u003cimg style=\"border: 1px solid #e0e0e0; border-radius: 5px\" src=\"https://vuegg.github.io/static/editor.png\"\u003e\n\n\n\u003c/br\u003e\n\n## Current Features\n\n* Mockup / prototype by drag'n'drop components and move/resize them\n* Support for standard Mouse and Keyboard combinations\n* Responsive preview (phone, tablet, web)\n* Basic set of HTML5 elements\n* Material design components ([vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter))\n* [Vuejs](https://github.com/vuejs/vue) sources generation (download .zip)\n* Connect with GitHub (save/load vuegg projects)\n* Local persistence to save the work in progress\n* ... more to come with time\n\n\u003c/br\u003e\n\n## Keyboard Shortcuts\n\n### Select\n* **Mouse down + Drag + Mouse up**: Draw a selection area\n* **Ctrl [or Meta] + Click**: Select outer-most item, or parent container\n* **Ctrl [or Meta] + Shift + Click**: Add [outer-most] item to selection\n* **Esc**: Clear selection\n\n### Move\n* **Mouse drag \u0026 drop**: The standard way\n* **ArrowKeys**: Moves the selected elements 1px\n* **Shift + ArrowKeys**: Moves the selected elements 10px\n\n### Copy / Cut / paste\n* **Ctrl [or Meta] + C**: Copy selection\n* **Ctrl [or Meta] + X**: Cut selection\n* **Ctrl [or Meta] + V**: paste selection\n\n### Delete\n* **Delete [or Backspace]**: Deletes selection\n\n### Undo / Redo\n* **Ctrl [or Meta] + Z**: Undo last action\n* **Ctrl [or Meta] + Shift + Z**: Redo last action\n\n\u003c/br\u003e\n\n## Roadmap\n\nOff the top of my head, I foresee the following features to be developed for the next releases:\n\n- [x] Visual feedback when dragging element over droppable container\n- [ ] Grid/layout overlays positioning guides ([#14](https://github.com/vuegg/vuegg/issues/14))\n- [ ] Hold shift to maintain aspect ratio on manual resize\n- [x] Ability to zoom-in / zoom-out in the editor ([#24](https://github.com/vuegg/vuegg/issues/24))\n- [ ] Allow the insertion of raw CSS rules (expert mode)\n  - [ ] Identify possible risks\n- [ ] Add extra styles controls\n  - [ ] BoxShadow\n  - [ ] Overflow\n  - [ ] TextOverflow\n- [ ] Manage creation/edition of custom components\n  - [ ] Transition to custom component (group/ungroup)\n  - [ ] Implement custom component editor view\n- [ ] Implement tree navigator to visualize page structure\n\n\u003c/br\u003e\n\n## Run vuegg locally\n\n### Auto-run\n``` bash\n# install, build and serve\nnpm run vuegg\n```\nNavigate to `localhost:5000` to serve (a production-ready) vuegg.\n\n\u003c/br\u003e\n\n### Step-by-step setup\n\n##### 1. installation\n``` bash\n# install client \u0026 server dependencies\nnpm run install:all\n\n# OR install only client / server\nnpm run install:client\nnpm run install:server\n```\n\n##### 2. development\n``` bash\n# serve vuegg-client with hot reload\nnpm run client\n\n# start vuegg-server (auto-restarts on changes)\nnpm run server\n```\nNavigate to `localhost:8080` to serve *vuegg-client* with hot-reload (development server).\n\n\u003e For detailed explanation on how things work on the client side, checkout the **[vuejs-templates/webpack](http://vuejs-templates.github.io/webpack/)** guide and docs for **[vue-loader](http://vuejs.github.io/vue-loader)**.\n\n\u003e For development *vuegg-server* will only generate vuejs projects (it won't be serving *vuegg-client* resources). Auto-restart capabilities possible thanks to **[nodemon](https://github.com/remy/nodemon)**.\n\n\u003e The above commands should be run in separate terminal instances.\n\n##### 3. production\n``` bash\n# build vuegg-client for production with minification\nnpm run build\n\n# start vuegg-server at localhost:5000\nnpm run start\n```\nNavigate to `localhost:5000` to serve (a production-ready) vuegg.\n\n\u003c/br\u003e\n\n### Connect with github\n\nVuegg makes use of `.env` files to set up some environment variables. The current setup allows you to have 3 files with different configurations: `.env`, `.env.dev` and/or `.env.test`, containing the following variables:\n\n``` yaml\n# Create an OAuth App on github and use your client ID and Secret\n\nCLIENT_ID=y0urcl13nt1d\nCLIENT_SECRET=y0urcl13nts3cr3t\nCALLBACK_URL=http://localhost:8000/auth\n```\n\n\u003e This files should exist only on your local machine, do not add them to the git repository.\n\nNow if you wish to test out the *connect with github* functionality on your local environment, it's necessary to run vuegg-client and vuegg-server through the following command:\n\n``` bash\nnpm run oauth\n```\nYou should be prompted with 3 options to pick. Run server and client in separate terminal instances.\n\n\u003c/br\u003e\n\n## History \u0026 current state\n\nThe project was born as a sandbox for me to get started on the [vue](https://github.com/vuejs/vue) world, in fact its ~~un~~original name was vuexample (*very unique*, I thought at the time).\n\nNot 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.\n\n\u003c/br\u003e\n\n## Contribute\n\nVuegg is a concept project (and work-in-progress too), feel free to fork it or contribute however possible. You've got a feature idea? Open an [issue](https://github.com/vuegg/vuegg/issues)! Are you up to the task of implementing it? Open a [PR](https://github.com/vuegg/vuegg/pulls)!\n\nHelp me make vuegg grow!\n\n\u003c/br\u003e\n\n## Donate\n\nDo you like vuegg? :hatching_chick:\n\nAs for today, this project is developed and maintained with :heart: by [@alxpez](https://github.com/alxpez), on spare time, after work hours and during homie weekends. There's still much work to do and ideas waiting to come afloat.\n\nCode contribution is the most desirable help to keep the project going, but for those with no much time in hands that still want contribute...\n\n\u003ca href=\"https://www.patreon.com/bePatron?u=10700791\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/vuegg/vuegg-assets/master/patreon.png\" alt=\"Become a Patron\" style=\"height:35px;width:auto\"/\u003e\u003c/a\u003e OR \u003ca href=\"https://www.buymeacoffee.com/alxpez\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/vuegg/vuegg-assets/master/buymeacoffee.png\" alt=\"Buy Me A Coffee\" style=\"height:35px;width:auto\"\u003e\u003c/a\u003e\n\nYour donation will help me to stay awake during those hours I should be sleeping.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falxpez%2Fvuegg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falxpez%2Fvuegg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falxpez%2Fvuegg/lists"}