Essentials of interactive prototypes with VueJS in less than 5 Minutes

I recorded a short, screencast to show the core principles of VueJS that make it a powerful prototyping tool that requires no setup.

What’s included:

  • Dynamically render data to HTML using the simple template syntax
  • Use v-model to keep user input and data in sync
  • Using simple functions, like “length” in your markup
  • Rendering lists using v-for (characters of a string, Array, Object, …)
  • Adding user interaction with v-on (click, keyup, …) to call a method
  • Using v-bind:class to conditionally apply classes to an element

What’s not included:

  • entertaining music or sexy visuals
  • Flux, SSR, Routing, Babel, Webpack, Functional Programming, Immutables, CSS-in-JS, … this isn’t necessary to create an interactive throw-away protoype. Save all of that for later and then use vue-cli or nuxt-js when you want to go develop something for real 👾

With those concepts, you can already achieve a lot without writing a lot of JavaScript.

You can learn more by reading the great documentation with many more examples at https://vuejs.org/

Enjoy and share this with your designer friends who are eager to add HTML prototypes to their toolbox but are afraid it would take them too long to learn 😎

The video

The result after a few minutes is a text input field that allows users to type text that is then displayed in two ways: As a full headline with the length of the text and as a collection of the individual characters that make up the text. When clicking a card, the matching characters are highlighted.

Note for the haters of template syntax: If prototyping speed is not your main goal and you rather want to develop a larger, scalable application, VueJS also lets you write components using more verbose code and render functions.


You can find the CodePen here: https://codepen.io/getflourish/pen/JNrMEe