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 + '_from_' + prevView" 
    mode="in-out">
      <component :is="currentView"></component>
    </transition>
  </div>

</center>

CSS

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

#app > * {
  position:absolute;
  height:100%;
  width:100%;
}

/* main */
.step_mainComponent_from_componentA-leave-active,
.step_mainComponent_from_componentB-leave-active {
  transition: transform 0.3s;
}

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

/* A */
.step_componentA_from_mainComponent-enter-active {
  transition: transform 0.4s;
}

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

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

/* B */
.step_componentB_from_mainComponent-enter-active {
  transition: transform 0.4s;
}

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

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

JavaScript

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

const mainComponent = Vue.component('mainComponent', {
  template: `<div style="background-color: #666; z-index:1">
  <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%;  z-index:2">
  <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%;  z-index:2">
  <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',
    'prevView'
  ]),
})