open-source-labs / prevue

🎨 All in One Prototyping Tool For Vue Developers.

---

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 making it possible to :

• Build components, visualize UI and preview the associated code
• Set up different routes and views for each project
• Establish parent-child component relationships
• View application hierarchy in tree format
• Save and open projects that are currently in progress, ensuring that completed work is not lost and can be revisited at any time
• Export 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 at your convenience!

Getting Started

---

Adding Views

• Select an existing view from the View Creator dropdown, or enter a new view name, then select your custom view from the View Creator dropdown
• Any components created on a given view will be automatically saved to that specific view
• See your application’s hierarchy by clicking the ‘Tree’ icon in the navigation bar

Tree View of Application Architecture

Adding Components

• Enter a component name in the Component Creator field and select HTML elements
• Clicked elements will be shown in the right sidebar -- drag elements to change their order
• Once you're satisfied, click ‘add component’ button 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 selected elements to the right to nest elements
• Establish parent-child component relationships via the dropdown menu when creating or editing components

Saving / Opening / Exporting Projects

• 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 without signing in

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

Built With

---

• Express
• Jest
• MongoDB
• Mongoose
• Node.js
• SuperTest
• Vite
• Vue Router
• Vue Test Utils
• Vue.js
• Vuex
• Vuetify

Changelog

---

PreVue 3.0 Updates:

• OAuth integration with GitHub for secure authentication
• Full CRUD functionality for prototype creation
• Implementation of appropriate hierarchical relationships reflected in UI
• Website and Homepage redesign for seamless user experience
• Realistic rendering of elements to Component Display
• Delete and Undo functionality for individual Components
• Project saving, loading & export ability

PreVue 2.0 Updates:

• Implementation of PreVue as a web application
• TypeScript integration
• Backend infrastructure built with Node/Express
• General UI/UX enhancements
• Testing with Vitest and Supertest (and Jest)

Contributing to 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. Follow PreVue on LinkedIn for more updates.

Ideas for additional features include:

• Project livesharing for collaborative sessions (via Websockets)
• Migrate state management from Vuex to Pinia
• More thorough testing with Jest
• Ability to rename and add styling to individual components
• Containerization of PreVue App
• User Authentication updates via OAuth

Authors

Prevue 3.0

• April Sanders @algorithmrhythm
• Cole Jaeger @colejaeger0
• Ilay Eskinazi @Pixolino
• Nathan Bornstein @greenteaisgreat

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](LICENSE.md) file for details

prevue's Issues

save:

• check if there is a last saved location
• add save functionality to create and write state from vuex store to a json file

Website should redirect to www or no-www

The website technically has two URLs:

https://prevue.io/

and:

https://www.prevue.io/

As a best practice, one of those should redirect to the other, whichever you prefer.

Fix draggable

• look into new library to use
• to reproduce bug: component is dragged to parent's boundaries it passes through the parent limitation
• ensure created component does not pass the width of componentDisplay

[Question] Windows binaries

Is there any known reason preventing someone from building this electron app on Windows for themselves?

Thanks in advance
W

hotkey shortcut commands

Bulma components

Hello guys, i thinking little bit about how integrate bulma components to use in prevue ui, look so nice, have one possibility for support that?

How to close a project

For example I started the application and got Untitled-1, then clicked Add project and got Untitled-2, How do I close either project? I'm not seeing any x or close button.

Add veutify to application

Mac OS X Exports Empty Folder

On OSX I've created a simple project with the default route and one component. When I click the upper-right Export Project button, I just get an empty folder. Is there something I'm doing wrong or haven't set up properly?

Repro steps:

• Import the attached project
• click export ptoject

Expected: Vue project is exported

Actual: Blank folder is exported

test-project.json.zip

set up boiler plate for exporting code

Demo link (prevue.live) doesn't not resolve

www.prevue.live

Research recommended UI design

• need to think about what should be included in additional side bar

asdf

add route functionality

• set up default homeview
• when route is added add as child to App component but also make it a key in componentMap

Import Third party components

Great job, a little suggestion, if you can import other Vue-based components (such as Element UI: https://github.com/ElemeFE/element ) it will be more perfect.

Allow to import a project with the package.json file

By this way, with package.json, PreVue could know if a framework is used and which directories are to check.

Please, this could be really a nice feature !

saving user progreess

• research how to use local storage or any other client storage

new:

• save the previous project into local forage
• opens a new tab (blank state)
• reset current state
• if there's no last saved location: prompt user to save

How to install and run?

How can I install and run this tool? I was expecting more instructions in your README.md file.

open:

• load json file and check if there's an active tab. If there is an active tab save state of the active tab in local forage

• set state to the state of the json file

本低运行无法启动呢

本地运行 yarn serve 不好使

Create Sidebar

下载按照步骤无法正常运行

安装完成以后,运行,报连接错误

Testing save folder

• button that when clicked enables user to save a folder

close tab

Make Vue components responsive to different devices

Provide PWA version

I am on a chomebook and this looks very handy to talk with clients about designs. How hard would it be to have this as a PWA? I can't see any big stuff electron specific save for the export. Could there be a html5 only version that just created the .json file and the desktop would create the code output?

Add subcomponents to component

Currently I see all components (except views/components) are listed in the /components folder. Do we have away to make /components/subFolder/vueCompnentHere.vue?

Release via GitHub with SHA

Downloading it via a static AWS link kind of sucks and is not secure. :\

make html code in codecomponent display nestable

Take a look

Hi,

I have lately also been building a Vue based prototyping tool:

https://v2.quant-ux.com/#/

It has also some code export functionality. Would it might make sense to team up?

Cheers,

Klaus

highlight currentRoute

research recommended UI

• need to discuss what should be included in additional side bar

Changed componentDisplay to render based on a specific route

• Add active route property to store
• Have componentDisplay render the children of the active route

export route project code functionality

Project code exporting should work when user creates routes for their project.

Fix delete component bug

• Do not implement with setInterval

save as

test commit