OverVue

Prototyping 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 resulting boilerplate can be exported as a template for further development.

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

Table of Contents

• Features
• OverVue 2.0 Changelog
• OverVue 3.0 Changelog
• OverVue 4.0 Changelog
• How to Use
• Installation
  • General Installation
  • For WSL
  • For Slack OAuth
• Contributing
• Authors

Features

• Upload a frontend mockup image
• Visualize draggable and resizable components
• Create parent-child hierarchy of components
• Add html elements to components
• Create routes to be used by Vue Router
• Live-generated previewable code snippets for each component
• Live-generated tree view to aid in visualizing parent-child hierarchy
• Save projects and open previous projects
• Export full boilerplate code for a working frontend
• Undo/redo functionality _^(v2.0)
• Ability to navigate into HTML elements from a selected Vue component _^(v2.0)
• Assign one image per route _^(v2.0)
• Can now set Vue components to specific layers _^(v2.0)
• Will now load route images along with project _^(v2.0)
• Windows compatibility for uploading mockup images. _^(v2.0)
• Full Vuex functionality, can add props, actions, and state to components. _^(v3.0)
• Full edit functionality, can change the name of components as well as delete properties from a component _^(v3.0)
• More robust code snippets with Vuex props, state, and actions included _^(v3.0)
• Hotkey shortcuts to copy/paste/delete selected component _^(v4.0)
• Connect to a Slack Workspace and send Slack Messages through OverVue _^(v4.0)
• Ability to delete states or actions from the store _^(v4.0)
• Vue Devtools enabled for Developers _^(v4.0)

↥Back to top

Changelog 2.0

Changelog 3.0

Changelog 4.0

↥Back to top

How to use

• Upon opening the application a Connect to Slack button will appear. To skip this step click 'Skip'

• Click the button to open a browser window, log in to your Slack workspace and select a channel to send save notifications.

• If you have logged in to Slack, upon saving your project file you will receive a prompt with the option to notify your team.

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

• Upload a mockup from your filesystem if you'd like. Remove the mockup and choose a new one if needed.

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

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

• After adding, you can move and resize the component in the display.

• 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 drawer displays live code snippets for the selected element.
  

• You can view and add new routes and associated components in the left-hand drawer.

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

• When finished creating, 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
    ...
  views/
    HomeView.vue
    UserCreatedRouteComponent1.vue
    UserCreatedRouteComponent2.vue
    ...
  App.vue
  main.js
  router.js
babel.config.js
package.json

↥Back to top

Installation

To download the development version for windows or mac, please visit https://www.Overvue.io

This app was developed using the Quasar framework, so first you will need to install the Quasar cli

npm i -g @quasar/cli

Install dependencies

npm i

To open Vuejs devtools (devtools should be open before devmode, otherwise, you can justforce reload electron app in dev mode after opening dev tools)

./node_modules/.bin/vue-devtools

To run electron app in dev mode

quasar dev -m electron

To build a new .dmg / windows .exe

quasar build -m electron

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

followed by the command for the devtools or devmode. If you want both open, enter commands above followed by starting the devtools:

./node_modules/.bin/vue-devtools

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

quasar dev -m electron

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

Contributing

We'd love for you to test this application out 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:

• Option to export files in TypeScript
• Ability to place child components into HTML elements
• Integration with Storybook
• Edit State and Actions in the Vuex Store

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

↥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

Inspired by PreVue

↥Back to top