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

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: