vue-class-component playground

HTML

<div id="app"></div>



<!-- Importing libs and setup -->
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
<script>
var s = document.querySelector('script[type="text/babel"]')
s.setAttribute('data-presets', 'stage-2')
s.setAttribute('data-plugins', 'transform-decorators-legacy,transform-class-properties')
</script>

Babel + JSX

const { default: Component, Mixins } = VueClassComponent

@Component()
class MyMixin extends Vue {
  mixinMessage = 'mixin message'
}

@Component({
  template: `
  <div>
    <h1>Message 1: {{ message1 }}</h1>
    <h1>Message 2: {{ message2 }}</h1>
    </div>
  `,
  mixins: [MyMixin]
})
class App extends Vue {
  message1 = this.mixinMessage
  message2 = ''
  
  created() {
  	this.message2 = this.mixinMessage
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})