vue-class-component playground

by ktsn

HTML

<div id="parent_foo"></div>
<div id="child_foo"></div>
<div id="parent_bar"></div>
<div id="child_bar"></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/jsx"]')
s.setAttribute('data-presets', '')
s.setAttribute('data-plugins', 'transform-decorators-legacy,transform-class-properties')
</script>

Babel + JSX

const { default: Component } = VueClassComponent


class Parent extends Vue {
  static foo = 123;
  
  static bar() {
    return 456;
  }
}


class Child extends Parent {
}

document.getElementById('parent_foo').innerHTML = Parent.foo;
document.getElementById('child_foo').innerHTML = Child.foo;
document.getElementById('parent_bar').innerHTML = Parent.bar();
// TypeError: Child.bar is not a function
document.getElementById('child_bar').innerHTML = Child.bar();