Using Vue.js (Angular/React) for building prototypes

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 🙂

The benefits of building a prototype with a JavaScript framework

It doesn’t have to be a Vue.js framework. There’re other popular JavaScript frameworks that you can use e.g. React or Angular.

All these frameworks are great options for building something instantly.

If you master one of the JavaScript frameworks you’ll open a whole new world. You’ll see how easy and fast it is to build a prototype in JavaScript.

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.

Here’re some of the benefits of using a JavaScript framework to build a prototype:

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

Closing notes

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. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-prototypes

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.