Prototyping Development Tool for Vue Developers

OverVue is a prototyping tool that allows developers to dynamically create and visualize a Vue application, implementing a real-time intuitive tree display of component hierarchy and a live-generated code preview. The easy-to-use GUI allows you to add HTML attributes and CSS properties to help the developer envision their next project. The resulting boilerplate code can be exported as a template for further development in your IDE of choice.

这个程序能帮你生成Vue 组件, 设置 routes , 也可以帮你显像Component Parent-Child组件树。你只要做一些小配置然后可以下载code boilerplate. 这样你就可以很方便简洁地生成Vue前台APP了！

Table of Contents

• Table of Contents
• Installation
  • WSL Installation
  • Running the Docker Image
• How to use
• BETA
  • Slack OAuth
• Changelog
• Contributing
• Authors

Installation

To download the production version for windows or mac, please visit https://www.overvue.org

Install dependencies

npm i

To run electron app in dev mode (note: Vue Devtools will launch automatically)

npm run dev

To build a new .dmg / windows .exe

npm run build

WSL Installation

The ability to load the application and/or devtools requires a tool/application to run a linux display as WSL does not have any display drivers since it is based off of just a CLI. I recommend X410 (https://x410.dev/), althought it does cost $15, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but requires more set up.

If you choose to use VcXsrv, you will need to select a couple options:

• Launch XLaunch
• Select multiple windows and display number=0.
• Select no client.
• Select Clipboard, Primary Selection, Native opengl, and disable access control.
• If Windows firewall pops up - select Public for this server to work.

If you choose to use x410, you will need to set the environment DISPLAY variable on each console:

So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal: For WSL 1 :

export DISPLAY=:0

For WSL 2 :

export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
export LIBGL_ALWAYS_INDIRECT=1

Then run the following command to run both OverVue and Vue developer tools.

npm run dev

To launch the Vue devloper tool, use the following command.

./node_modules/.bin/vue-devtools

Then to start only OverVue in developer mode, open a new terminal instance and set the DISPLAY value again (re-enter above command for DISPLAY):

quasar dev -m electron

NOTE:

• Electron-deeplink currently does not work on our WSL2 computers and output an error during installing the dependency which prevented the application to open in dev mode. Go to /src-electron/electron-main.js and comment out line 3/import line to bypass error. The developers did not find any impacts on application so far.
• There might be an npm install error despite all instructions. Try the following command below:

sudo apt install libgconf-2-4 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm-dev libnss3-dev libxss-dev

Running the Docker Image

To run the built version, pull down the docker image from [Docker repo]

In your terminal, run:

docker run -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=$DISPLAY -v`pwd`/src:/app/src --rm -it overvue

Running the dev environment on Docker as a Mac User

To run OverVue through Docker on a Mac, you'll need to install XQuartz:

brew install --cask xquartz

Important: RESTART your computer.

Update your PATH variable to /opt/x11/bin to your .zshrc. For example:

export PATH=/opt/X11/bin:$PATH

Set up XQuartz:

• Launch XQuartz
• Under the XQuartz menu, select Preferences.
• Go to the security tab and ensure "Allow connections from network clients" is checked.
• Restart XQuartz

Run the following command in your terminal (replacing localhostname with your local host name)

xhost +localhostname

If you don't know your local host name, run the following command to find it:

echo $(hostname)

Build the image using Dockerfile-Mac:

docker build -t overvue -f Dockerfile-Mac .

Run the image using the following command

docker run -it --env="DISPLAY=$(ifconfig en0 | grep inet | awk '$1=="inet" {print$2}'):0" --security-opt seccomp=./chrome.json overvue

Run in dev mode using:

npm run dev

For more information about running Electron through Docker on a Mac, check out these posts:

Running the dev environment on Docker as a WSL user

Build the image using Dockerfile-WSL:

docker build -t overvue -f Dockerfile-WSL .

To run

docker run -v /tmp/.X11-unix:/tmp/.X11-unix -e DISPLAY=$DISPLAY -v`pwd`/src:/app/src --rm -it overvue bash

Run in dev mode using:

npm run dev

↥Back to top

How to use

• OverVue will assign a default root App component and a default route called "HomeView"

• To add a new component, type its name in the component name box and select any HTML elements that should be rendered by that component.

• HTML elements can also be added after creation by selecting the component in the display, then selecting HTML elements.

• You may nest HTML elements by clicking the chevron and selecting the nested HTML elements. Return to the parent HTML element by clicking clicking the carrot above the HTML element.

• Select a parent component for the new component if needed.

• After creating the component, you can move, resize, and recolor the component in the display. For advanced styling options, double click on the desired HTML element to modify. Here, you may add attributes such as class, ID, and v-model.

• You can also duplicate components with Ctrl/Cmd C & V and see the component tree updated in real time.

• Duplicate components will appear offset from their original and retain the same state and route assignments.

• Child components will inherit the same parents, but parent components will not inherit duplicate children.

• The right-side, Component Details > Code Snippet Tab displays live code snippets for the selected component.

• You can view and add new routes and associated components in the right-side, Routes Gab. The newly created routes will be visible in the Project Tree Tab.

• State and actions can be created, edited, and assigned to components.

• When finished creating, view your code snippet under the code snippet tab and you can export to a file location of your choice. Below is the exported file structure:

public/
  index.html
src/
  assets/
  components/
    UserCreatedComponent1.vue
    UserCreatedComponent2.vue
    ...
  router/
    index.js
  views/
    HomeView.vue
    UserCreatedRouteComponent1.vue
    UserCreatedRouteComponent2.vue
    ...
  App.vue
  main.js
babel.config.js
package.json

↥Back to top

BETA

Slack OAuth

For the Slack OAuth, you will need to create a Slack app through their website (https://api.slack.com/apps?new_app=1), so that you have your own Client Secret and Client ID. Then create two .env files (one for development and one for production).

1. Create a Slack App from the link above. Copy your Client ID and Client Secret somewhere safe.
2. Create two .env files in the main root of this repository. Name them:

.env
.env.development

3. Open .env and add these three environment variables. Replace and with the client id and client secret given to you when you created your Slack App.

SLACK_CLIENT_SECRET = "<client secret>"
SLACK_CLIENT_ID = "<client id>"
SLACK_REDIRECT_URI = "overvue://slack"

4. Next, open .env.development and do the same, just note that the SLACK_REDIRECT_URI will be different here:

SLACK_CLIENT_SECRET = "<client secret>"
SLACK_CLIENT_ID = "<client id>"
SLACK_REDIRECT_URI = "overvuedev://test"

↥Back to top

Changelog

Changelog 2.0

Changelog 3.0

Changelog 4.0

Changelog 5.0

Changelog 6.0

Changelog 7.0

Changelog 8.0

Changelog 9.0

↥Back to top

Contributing

We'd love for you to test out the application and submit any issues you encounter. Also feel free to fork to your own repo and submit PRs. Here are some features we're thinking about adding:

• Ability to choose options or composition API for code snippet and exported code
• Ability to choose Vuex or Pinia for code snippet and exported code
• Ability to add two-way binding to input elements
• Make snap-to-grid optional with a toggle feature
• Expand testing suite and add more dynamic tests

If you make changes and wish to update the website, here is the link to the repo: https://github.com/OverVue9/OverVueWebsite

↥Back to top

Authors

Contributors:
Joseph Eisele @jeisele2
Dean Chung @deanfchung
Dean Ohashi @dnohashi
Drew Nguyen @drewngyen
Alexander Havas @LOLDragoon
Keriann Lin @keliphan
Allison Pratt @allisons11
Joju Olaode @JojuOlaode
Sean Grace @ziggrace
Nicholas Schillaci @schillaci767
Terry Tilley @codeByCandlelight
Faraz Moallemi @farazmoallemi
Alex Lu @aleckslu
Jeffrey Sul @jeffreysul
Kenny Lee @kennyea
Ryan Bender @rdbender
Sonny Nguyen @sn163
Gabriela Kokhabi @gkokhabi
Ross Lamerson @lamerson28
Shanon Lee @shanonlee541
Zoew McGrath @Z-McGrath
Aram Paparian @apaparian
Bryan Bart @MrBeeAreWhy
Julia Bakerink @jbbake
Kerolos Nesem @Kerolos-Nesem
Megan Nadkarni @megatera
Johnny Chan @jchan444
Jace Crowe @JaceCrowe
Keyla Koizumi Nishimura @keylakoizumin
Katherine Kim @katherinek123
Chris Wong @Koregano73
Honghao(Michael) Sun @sunhonghaoparis
Alex Law @alexlaw528
Emma Genesen @EGenesen
Jigar Patel @jigarxp
Linden Young @lindenyoung
Chris Davis @chdavis0917
Ji Kim @dwejikim

Inspired by PreVue

↥Back to top