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