OverVue Getting Started Guide

Excerpt from OverVue Desktop Application

Getting Started

Get started with OverVue to seamlessly transition between prototyping and production, with in-app prototyping that can be exported as comprehensive project code built with Vue.js. 

Project Setup

Create a new project by clicking the gear icon in the top right corner. From here, you may login through Slack to automatically push project update notifications to your team Slack. Choose your TypeScript and Vue Test options. Select OAuth for Google or GitHub, then customize the canvas grid by choosing a density for width and height. You’re all set!

Creating Components

Create a new component by clicking the Create Component menu in the left sidebar. Set your components name, and select any parent components or child HTML elements.

To use components from Vue.js 3.0 compatible libraries, select the Element+ Component button and select an element type, or search by name.

Note: Element+ Components will feature a prefixed ‘e’ on the HTML class name.

Select the desired HTML tag for your component. Click create component to render the new component in the viewport.

Try adding a class attribute to your component to acapture prototypal styling. Components can be customized further in the sidebar by adding an id, parents, children, props, state or actions. All additions to the component are captured in the export process.

Building Out Your Prototype

To customize your prototype, drag and drop your components on the grid area of the viewport. Resize by clicking and dragging from the corners. Add comments by clicking the notepad icon in the left corner of the component. To change the color of a component, click the canvas icon and select a color.

Additional options include:

Deleting a Component:

Delete a component by selecting it and clicking Delete Currently Selected in the Update Component Menu

Undo:

Almost any action in OverVue can be reversed with undo, or re-applied with redo, found on the top left corner of the nav bar.

Component Details

Access details about your component from the right sidebar. Toggle between live updated code snippets, component hierarchy diagrams, and project routing visualizations.

Routes

Routes are accessible in the Routes tab. To create a route, enter the routes name in the input field and click the plus icon. Navigate routes by clicking on the route. Delete routes by clicking the x in the right hand corner of the route block.

Note: The default route, HomeView, can be updated. It cannot be deleted.

Saving or Exporting Your Project

When you are finished with your project, save or export it. As you move through the development lifecycle, you can import your project at any time to make updates.

Press the Save button to save your OverVue project locally as a JSON file.

Press the Import button to import an existing JSON project file or Vue component.

Press the Export button to export your project as boilerplate code.