OverVue, a Vue Prototyping Tool

Dean Chung
Jul 26, 2019 · 4 min read
Image for post
Image for post

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.

Image for post
Image for post
Image Upload

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.

Image for post
Image for post
Creating Components

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.

Image for post
Image for post
Tree and HTML re-render

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.

Image for post
Image for post
Code

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.

Image for post
Image for post
Routes

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:

  1. Vuex state management.

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.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store