OverVue 6.0: Vue’s Most Popular Prototyping Tool Just Got Better
Expedite the development of your next Vue application — now with TypeScript, Vite and a revamped UI
One of the most accessible front-end frameworks is getting even easier to work with — we are excited to announce the release of OverVue 6.0!
OverVue is a prototyping tool for Vue.js that has been brought up to speed with the latest features of Vue 3. The Vue framework has exploded in popularity in the past few years; consider the State of JS 2021 data that shows Vue’s meteoric rise from being the least used framework in 2016 to essentially tied-for-second place in 2021. Vue sports healthy developer satisfaction unlike the other second place contender, Angular. Despite its relative youth, Vue remains the most popular front-end framework on GitHub — perhaps unexpectedly surpassing even the colossus that is React.
And now, with OverVue 6.0, getting your Vue applications up and running is even easier. The release of version 6.0 introduces several updates to boost performance, significantly improve the user experience, and reduce your code burden through enhanced boilerplate generation. OverVue’s new features will now allow you to export your projects in TypeScript (utilizing Vite), visualize your component hierarchy in an interactive and navigable tree diagram and leave notes on components that export as comments in your Vue files. And those are just to name a few improvements, changes and fixes 6.0 has in store!
Interested in learning more? Check out our website at OverVue.io, or read more below!
Export Projects in TypeScript
OverVue is now up to date with Vue 3’s out-of-the-box support for TypeScript. With OverVue 6.0, your projects can easily be exported with TypeScript-specific syntax and dependencies so you can quickly get started developing your next app with the added benefits of static typing. Simply prototype your application, export the project, and install your dependencies — Voilà! — you are ready to start developing in your IDE of choice. CLI commands are pre-generated for you to easily develop, build, or typecheck your code.
Don’t want TypeScript? Don’t fret — none of the TypeScript dependencies will be present in your project if you choose not to export as TypeScript.
Exported Projects Now Run Through Vite
Continuing on the theme of exports, your projects will now build using the performant Vite (/veet/) framework rather than Webpack. Vite offers several advantages, including faster compilation times, fewer dependencies, and better Vue support without the need for additional libraries. Your projects now have half as many dependencies to install before things are up and running. OverVue’s goal is to make the transition from design to development as seamless and simple as possible, and Vite meets this goal with elegance. Your projects will build faster and so will you.
Other Improvements in OverVue 6.0
Create Libraries with New Component Export/Import
Another new functionality in OverVue 6.0 is the ability to import and export your components as you make them. No JSON abstraction, no conversion of filetypes — Vue in, Vue out. As a result, you can now generate component libraries for use within OverVue to make it even easier to start developing your application. Build it once, and never build it again. OverVue’s import functionality is currently limited to Vue files exported from OverVue specifically, as we continue to iterate on our parsing algorithm.
Component Notes Will Appear In Your Code
While OverVue aims to make the prototyping process quick and painless, it isn’t always possible to complete your prototype in one session. OverVue already had the ability to save and load your projects, but now you can also place notes on components. No longer do you need to prototype in OverVue and document everything elsewhere.
The icing on the cake? These notes will export as comments into your project, so anything you place in your OverVue notes will be visible in your IDE when you are done prototyping.
Universal Support With Containerization
In response to reports of users having issues operating OverVue on their machines, the application is now available to run inside of a Docker container. As a result, it is now possible to run OverVue on any machine that can run Docker. The repository now includes Dockerfiles and instructions for operating the application via Docker on MacOS or WSL2/Linux as well as a Docker image hosted on DockerHub you can simply pull and run.
NOTE: running an Electron application such as OverVue inside of a Docker container will not perform as well as running the application natively, so while Docker is now an option, it should be a last resort.
What’s Different Under the Hood?: Transition to Composition API
OverVue’s codebase has been transitioned from the Options API to the Composition API! This improves code modularity significantly by centralizing complex functionality within Vue composables, allowing multiple components to easily share logic. For example, rather than using mixins, emits or props, our new component export functionality is centralized within a composable, which all other components have access to. OverVue’s code is DRYer, more maintainable and more readable. For future iterations, developers will now have access to this powerful extension for any functionality that will be shared between components.
All these changes plus a whole lot more!
Many other features and a multitude of bug fixes have been implemented in OverVue 6.0. Here are some highlights, but we encourage you to download the application and give it a try so you can see for yourself!
- A new get started tutorial provides information on how to use the application so that you spend less time learning to use OverVue, less time prototyping, and more time working on your new application
- Improved algorithms for tree-building and component lineage to enhance performance while simultaneously eliminating bugs
- Boilerplate generation has been expanded to include generating your Vuex store state, actions and mutations
- The component tree diagram returns new and improved: with enhanced interactive visuals, it can now be used to navigate throughout your application’s prototype!
- 19 deprecated dependencies updated, breaking changes navigated, and vulnerabilities removed — all of OverVue’s packages are now up to date
- Menus are more responsive — adding and removing child components from parents is as simple as one click
- UI/UX improvements — a new logo and a sleek new design to get more done with less clicks!
How To Contribute
OverVue and its continued development is not possible without the help of the greater Open Source Community as a whole. If you are interested in contributing, please visit the links below, leave a comment, fork our repository and leave a star on GitHub!
Next Steps
We hope the facelift and functionality improvements in OverVue 6.0 make a big difference in streamlining the prototyping process, but we are always looking to the future. The ability to place child components inside HTML elements, add two-way binding to input elements, support for more semantic HTML tags, and more granular typing options for TypeScript exports are some of the features we’re looking to implement. Additionally, we hope to improve the importing algorithm to better support Vue files that come from outside sources.
Thank You!
Without the prior contributions of OverVue developers, none of this would have been possible. The OverVue 6.0 team would like to thank the fantastic developers that worked on this project before us: Dean Ohashi, Dean Chung, Drew Nguyen, Joseph Eisele, Alexander Havas, Keriann Lin, Joju Alaode, Allison Pratt, Faraz Moallemi, Sean Grace, Terry Tilley, Nicholas Schillaci, Alex Lu, Jeffrey Sul, Kenneth Lee, Ryan Bender, Sonny Nguyen, Gabriella Kokhabi, Ross Lamerson, Shannon Lee and Zoew McGrath.
And a special shoutout to Genevieve Annable (GitHub, LinkedIn) for her guidance and mentorship throughout the process of working on OverVue 6.0!
OverVue 6.0 Team:
Megan Nadkarni — GitHub — LinkedIn
Julia Bakerink — GitHub — LinkedIn
Kerolos Nesem — GitHub — LinkedIn
