Vue.js explained through pokemon

This is a multipart series that will range from shifting to a component-based approach to little, more general, tidbits like using animations and promises, based on another article called Vue.js Pokemon Battle Tutorial. It is essentially a guide to help rebuild the Pokemon battle stage, providing insight to Vue's features which are being used.

This series is meant for people who do have a basic understanding of Vue js.

Five part tutorial to rebuild a Pokemon battle stage.

  1. Single file components This tutorial shows how to setup a work flow to use single file components, splits the previous code base into 2 components and touches on computed properties.
  2. Attacks: $refs, Promises & event bus The second installment brings back the attack functionality. 2 different implementations are discussed to explain $refs, promises & events.
  3. Vuex: state management In this tutorial we're separating our state into a global state store.
  4. Damage calculations Traditional Pokemon attack damage calculations gets discussed in this article, we implement this through a Damage class.
  5. Transitions & animation Let's make use of Vue transition when Pokemon appear/faint and add some textual info when an attack is, for example, super effective through reusable transition.

I was surprised how fast I read through it and how easy it was to actually rebuild a Pokemon battle stage.

Learning Vue.js through Pokemon

A repo that contains the code for the tutorial series is available here. By Maxim Kerstens.