Video

Interactive Prototypes with VueJS

I recorded a short video 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 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 😎


👋 Hey!

I use Vue for most of my prototypes and apps. I also work with Processing, JavaScript, Node.js and CSS. I’m a trained designer and love to use code and technology in my creative process.