PreVue

All in One Prototyping Tool For Vue Developers

From Component Architecture to Code Exporting

PreVue allows users to conceptualize and visualize component architecture by allowing them to :

Create components and preview their associated code
Set up different routes and views
Establish parent-child component relationships
View application hierarchy in tree format
Export the component architecture as a Vue application created with default Vite settings.

Use PreVue to create projects in single sessions or sign in with GitHub to save projects and update them anytime. the component architecture as a Vue application created with the default Vue CLI settings.

Getting Started

How to use

Adding Components

Double click on the application icon
Create components by entering a name and clicking the HTML elements you need
Clicked elements will be shown in the right sidebar
Drag the elements to change their order
Once you're satisfied, click the button to ‘add a component’ and it will show up in the working area. Resize and move components to fit the design you have in mind.

Editing Components

Double click elements to bring up the modal view
Add additional elements to a component with a live preview of the component code
Drag elements on the right side bar to nest elements
Establish parent-child component relationships via the dropdown menu when creating or editing components

Adding Routes

Create different routes that represent different Views for your app.
Any components created on a given route will be automatically saved to that route
See your application’s hierarchy by clicking the ‘Tree’ icon in the navigation bar

Tree View of Application Architecture

Saving/Opening/Exporting Projects

In order to utilize the saving and opening functionality of PreVue, please clone the repo to run on your local machine.
If you're signed in with GitHub, click the ‘Save Project’ icon to save it to PreVue’s database
Click ‘Open Project’ to retrieve past projects
Once you're satisfied, click the export project icon to export your awesome project as new Vue application!
Other users can use PreVue's playground to create and export projects in single sessions.

Code Exporting

Below is the generated directory structure of the Vue application that is created when you export your design.

src/
  assets/
  App.vue
  components/
    UserCreatedComponent1.vue
    UserCreatedComponent2.vue
    ...
  views/
    HomeView.vue
    UserCreatedRouteComponent1.vue
    UserCreatedRouteComponent2.vue
    ...

Running your own local version

Setup

Clone this repo

git clone https://github.com/oslabs/PreVue.git

Install dependencies

npm i

Build the app

npm run build

Run the app

npm run server

Go to http://localhost:8080 to use PreVue!

Built With

Contributing

PreVue We encourage you to submit issues for any bugs or ideas for enhancements. Please feel free to fork this repo and submit pull requests to contribute as well. Also follow PreVue on LinkedIn for more updates.

Authors

PreVue 2.0

Jason Boo @jasonboo123
Robert Drake @rmdrake8
Sean Flynn @seanflynn5
Zach Pestaina @zachpestaina

PreVue 1.0

Hubert Lin @hubelin
Franklin Pinnock @pinnockf
Annette Lin @al2613
Daniel Shu @danshuu

License

This project is licensed under the MIT License - see the LICENSE.md file for details

oslabs-beta/PreVue