OverVue, a Vue Prototyping Tool
As of July 2019, Vue sits atop all JavaScript frameworks in GitHub stars, and #3 overall, surpassing React by more than ten thousand stars, leaving Angular in the dust.
As the youngest of the big three front-end JavaScript frameworks, it has exploded in popularity and has quickly become loved in the developer community.
This is despite the fact that Angular and React are backed by Google and Facebook.
As the youngest framework of the three, the developer ecosystem for Vue lags behind those of its competitors. OverVue is here to deliver and to help developers to quickly begin building their web applications.
At its core, OverVue is a desktop application, built with Vue and Electron, that allows the user to create Vue components, establish parent-child hierarchy, and set up routes with Vue Router, all from a beautiful user interface.
Once satisfied, the user can generate the file and export the boilerplate code to a project. Here are some more of its hot features!
Upload an Image
This first part is optional but very useful if you have a well-thought-out design which you are ready to turn into code.
Open the sidebar on the left and click ‘upload image’ to choose your mockup image from your file system. Clicking the arrow next to ‘Dashboard’ will toggle between showing and minimizing your dashboard.
Create a Component
Creating a component in OverVue is very simple. Give your component a name, select any HTML elements to place in the Vue template, and select a parent from the dropdown menu in the sidebar, if applicable.
Once you create your component, you can drag and resize your component to fit your image mockup.
If you forget to specify parent-child hierarchy in the dropdown menu, you can simply right-click your component to adjust the hierarchy.
Component OverVue
Toggle between active components with a left-click. Adjust your desired HTML elements from the component menu on the left and keep track of them in the dashboard.
Visualize your parent-child hierarchy with Team OverVue’s beautifully re-rendering tree display.
Code Snippets
Click the ‘code snippet’ tab in the dashboard panel to see your code. Feel free to copy the code onto your clipboard and paste it directly into your project.
Router Support
Enter a route name in the ‘routes’ dropdown and hit ‘enter’ to add routes to your application.
Toggling between routes will only show the components that exist in the active path on the canvas. This is essentially what Vue Router does in practice, in your application.
Any changes to your route structure will seamlessly update the tree display.
Save/Export
Once you are done, you can save your project and open it later, or you can export your new boilerplate code to your workspace.
A package.json is created and you can npm/yarn install your dependencies.
Moving Forward
There are several features we have not yet completed. As this tool is open source, help is welcome.
Some features we did not yet implement are:
- Vuex state management.
- TypeScript integration.
- Ability to nest HTML elements.
- Ability to drag only a specific parent along with its children with Vue draggable resizable.
- A CLI version and npm package.
- Ability to upload multiple images for each route.
Any suggestions are welcome!
The OverVue team is proud to launch our product in Beta. We welcome the first users and testers of our application.
We are happy to help developers speed up their initial application architecture setup and to speed up development with this beautiful abstraction.
You can find OverVue’s GitHub here.
Huge thank you for all the hard work of my fellow software engineers: Dean Ohashi, Drew Nguyen, and Joseph Eisele.
