Vue.js is a great tool for not just building sophisticated single-page applications (SAPs) but also for building prototypes.
I very often have clients from large organisations that need prototypes that can be shared with company C-level officers and top managers.
Normally, I would use apps like Marvel or InVision to build prototypes and UI mockups that “feel” like real websites. But usually, it’s not enough.
These services are great for prototyping your design to better understand the UX and UI of your app but they limit the functionality and responsiveness. That’s when things get complicated and you start overdelivering by building a product instead of a prototype 🙂
Hi, I'm Renat 👋
All these frameworks are great options for building something instantly.
I wrote an article a few days ago where I compared the best CSS frameworks for Vue.js. Using a CSS framework will speed the things up and make your prototype responsive.
- Simple integration – you can easily integrate any third-party services to your prototype.
- Flexibility – use your favourite HTML, CSS or JS framework.
- Hard code data – you can hard code client data using JSON
- Easy to move from prototype to product. I think it’s one of the most important advantages.
From prototype to product
The whole point of building a prototype is to understand whether this project or an app idea is good or not.
Very often your client would want to continue towards building a real product. That’s when you can pick your existing prototype and continue developing it.
You can replace hard-coded data with real data using API.
It’s important to have a prototype before you start converting your own or your client’s idea into a product. Choosing the right tools to build a prototype is also important.
In some cases using an online prototyping tool would be enough, in others, your client would want to have extra functionality or continue towards building a product. Vue.js is a perfect tool for making prototypes and building real products.
Please share your comments below.
Want to share this with your friends?
PS: Make sure you check other Vue.js tutorials, e.g. Top 5 CSS frameworks for your Vue.js project (2019), localStorage vs Vuex-persist in Vue.js.