Vue 2.0 Hello World

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>

<center>
  <div id="app">

    <transition :name="'step_' + currentView" mode="out-in">
      <component :is="currentView"></component>
    </transition>
  </div>

</center>

CSS

#app {
  width: 500px;
  height: 150px;
  background-color: gray;
}

.step_componentA-enter-active {
  transition: transform 0.4s;
}

.step_componentA-leave-active {
  transition: transform 0s;
}

.step_componentA-enter {
  transform: translateX(-100%);
}

.step_mainComponent-leave-active {
  transition: transform 0.3s;
}

.step_mainComponent-leave-to {
  transform: translateX(-100%);
}

.step_componentB-enter-active {
  transition: transform 0.4s;
}

.step_componentB-leave-active {
  transition: transform 0s;
}

.step_componentB-enter {
  transform: translateX(100%);
}

JavaScript

const store = new Vuex.Store({
  state: {
    currentView: 'mainComponent',
  },
  getters: {
    currentView: state => state.currentView,
  },
  mutations: {
    SET_CURRENT_VIEW(state, new_currentView) {
      state.currentView = new_currentView;
    },
  },
  actions: {
    setCurrentView({
      commit
    }, currentView) {
      commit('SET_CURRENT_VIEW', currentView)
    },
  },
})

const mainComponent = Vue.component('mainComponent', {
  template: `<div>
  <h1>mainComponent</h1>
    <button @click="setA" style="float: left;">Component A</button>
    <button @click="setB" style="float: right;">Component B</button>
  </div>
  `,
  methods: {
    setA: function() {
      this.$store.dispatch('setCurrentView', 'componentA');
    },
    setB: function() {
      this.$store.dispatch('setCurrentView', 'componentB');
    },
  }
});

const componentA = Vue.component('componentA', {
  template: `<div style="background-color: #eea;height:100%;">
  <h1>Component A</h1>
    <button @click="back" style="float: left;margin-top:6vh;">BACK</button>
  </div>
  `,
  methods: {
    back: function() {
      this.$store.dispatch('setCurrentView', 'mainComponent');
    },
  }
});

const componentB = Vue.component('componentB', {
  template: `<div style="background-color: #eeb;height:100%;">
  <h1>Component B</h1>
    <button @click="back" style="float: right;margin-top:6vh;">BACK AGAIN</button>
  </div>
  `,
  methods: {
    back: function() {
      this.$store.dispatch('setCurrentView', 'mainComponent');
    },
  }
});

new Vue({
  el: '#app',
  components: {
    mainComponent,
    componentA,
    componentB,
  },
  store,
  computed: Vuex.mapGetters([
    'currentView'
  ]),
})