PreVue 3.0: Vue’s most visual prototyping tool yet

As web developers, it’s crucial that our ideas be tangible and easily presentable. This makes prototyping an essential first step for bringing any web application to life.

In the saturated field of front-end JavaScript frameworks available in 2023, Vue.js stands out for its simplicity and flexibility, and remains one of the top choices in the field among developers. We feel that Vue deserves a reliable prototyping and design tool that can serve as a great first step towards bringing any application to life.

---

What is PreVue?

PreVue first sought out to solve a common issue within the CI/CD pipeline, which were delays between designers and developers to deliver consumables within preset timelines. Even with Scrum/Agile principles in place, there exists a barrier between the UX/UI team and engineers that actually produce the design with code. In the early days of PreVue, this barrier was addressed by generating layouts for single-page applications and outputting said layouts with production-ready Vue code. However, the earlier versions of PreVue lacked a robust graphical interface to let anyone who works with it know exactly what type of HTML elements they were working with.

---

Enter PreVue 3.0
a prototyping tool that allows developers to visualize their project layout and component hierarchy, then export it to a code editor. For the latest version, several improvements were made to make the app a more dynamic and approachable prototyping tool.

---

Creating a component, filling it with html elements

---

What’s New in 3.0?

---

Element Display

PreVue now renders draggable, resizable HTML elements on each component, so Vue devs can conceptualize their projects more clearly. Previously, elements could be added, re-arranged and nested inside components, but they would not display on screen.

With these changes, PreVue feels like a true design tool, removing the abstraction behind these elements and making it easy to understand their utility. This makes PreVue more useful for presenting and pitching their ideas to clients, stakeholders, or other devs.

A Cleaner Look

Given the aforementioned improvements to PreVue as a design tool, we felt it was important that the interface look more inviting, light, and minimalist.

UI Improvements

We’ve streamlined state management to ensure all changes made to a user’s project, including the arrangement of components and nesting of elements, remain after a page refresh. Users can also undo actions, allowing for a more user friendly experience.

---

Saving, opening and exporting project into a code editor

---

A great first step for your next project

PreVue allows users to customize their component tree, visualize their application’s layout, then bundle their project (Vite is tooled into the app) and immediately begin working in their code editor.

---

Check us out on GitHub!

---

PreVue 3.0 was crafted/nurtured/developed by these fine folks:

April Sanders: GitHub | LinkedIn

Ilay Eskinazi: GitHub | LinkedIn

Cole Jaeger: GitHub | LinkedIn

Nathan Bornstein: GitHub | LinkedIn

Comments

[Kevin Luo]

Thanks for sharing! I wanted to try and I downloaded the repo but I couldn't start the server successfully 🥲

[Aaron Reese]

open vscode
Open Terminal
create a new folder and navigate to it
git clone github.com/oslabs-beta/PreVue3.0.git
npm install
npm run dev

[Kevin Luo]

ooops! thank you @greenteaisgreat and @aarone4 , it's working
In the package.js

{
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "vite": "npm run server",
    "server": "node server/server.js",
    "test": "NODE_ENV=test vitest",
    "coverage": "vitest run --coverage",
    "start": "node server/server.js"
}

I tried serve, vite, server, start except dev 😆

[Nathan G Bornstein]

We 100% could've done better with the naming of the npm commands; we were building off an existing codebase, so some commands were jumbled together and we didn't really clarify some of the overlap between them. Glad you were able to get it working! This is one of our first big projects, so feel free to give any feedback you have :D

[Nathan G Bornstein]

Let me know if the approach @aarone4 mentioned works for you or not! I know there's still some kinks to work out, so please feel free to let me know of any more bugs

[Aaron Reese]

looks like an interesting and promising project. It could probably do with a tutorial or some YouTube videos as it wasn't clear what the purpose of adding base components was to the side bar and it felt non-intuitive adding new user defined components. when you double click into a user component it did not appear to be possible to nest all base components (e.g. I couldn't get a form to nest inside a div) I also couldn't find a way to remove a base or user component from the design surface.

[Nathan G Bornstein]

That's a wonderful idea! Doing a tutorial showing basic functionality isn't even something we've thought to do. And as @parkermcdonnell had said, we could really use with some proper documentation to address said basic operations.

The nesting issue is one we're aware of, as well as a bug that occurs when you try to save a project and then open it; it freezes the program and doesn't work again until a refresh is done on the browser.

It is possible to remove components, but it's not very intuitive on how to exactly do that 😅 you can remove your last action by hitting cmd-z (or ctrl-z on Windows). It's also possible to select an individual element (or entire component) and click the backspace button and that can remove the selected item you wish to delete. Hopefully we can implement a little red "x" or something on each element/component in the future to make that more obvious.

I really appreciate your feedback and am just happy you gave it a shot! Thank you for using PreVue!

[Parker McDonnell]

This looks really really cool. I'm looking to use Vue and PreVue to create simple UIs that can control and visualize data from microcontrollers that act as web server devices. I do a lot of embedded programming, but I'm not familiar with the web development side of things and not sure where to even start getting this tool up and running. Is there any documentation on getting PreVue and Vue up and running on a Linux distro, say Ubuntu?

[Nathan G Bornstein]

We're still really early on in polishing up some of the quality-of-life features, but hopefully we'll address those issues soon. So far, the closest thing we have for documentation is in the readme.md file located on the GitHub repo.

The tried and true method so far has been to use VSCode and clone it to your machine from the GitHub repo, then do an "npm i" to get all the dependencies, then "npm run dev" to get the local frontend server and then "npm run vite" to connect to the backend.

Please feel free to reach out for just about anything, I'm more than happy to assist! I made this with a few other friends and we're still pretty early on in our dev journey, so there's plenty of improvements to be made 😅

[Michael Synan]

Incredible

[Clayton Kehoe]

Thanks for sharing! ⭐️

[MorphZG]

Will try

[Nathan G Bornstein]

Thank you so much for giving us a shot! Please feel free to get back to me about any issues you come across on this thread or on the discussions section of our repo, which can be found at this link:

github.com/oslabs-beta/PreVue3.0/d...

Again, can't thank you enough for trying out our little project!

[Wesley Cramblitt]

Very cool. All of this time I've been either using a literal notepad, figma, or just visualizing in my head.

I didn't realize there were tools out there like this.

[Nathan G Bornstein]

Thank you so much for the wonderful feedback! That really means a lot to hear <3

[Wes Fincher]

Great idea! And I like what you have! A few questions or ideas if I may...

Any chance this grows into something like Figma for Vue3?
Can components be generated with Typescript and composition API (or can they be tailored to the users preference)?
Anything like theming for material UI or bootstrap so components are displayed closer to how they would look live?
Can 3rd party libraries be imported for reuse (e.g. PrimeVue, et al)?