<script src="//unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@2.3.1"></script>

<div class="container">
  <div id="app"></div>
</div>
html, body {
  height: 100%
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 25px rgba(0,0,0,0.08);
  transform: translate(-50%);
  width: 300px;
  height: 200px;
}

.counter {
  text-align: center;
  font-size: 45px
}
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment (state) {
      state.counter++
    }
  }
})

var App = new Vue({
  computed: {
    counter: function() {
      return this.$store.state.counter
    }
  },
  template: `
    <p class="counter">{{counter}}</p>
  `,
  store: store
});
App.$mount('#app');
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.