JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child></my-child>
</div>

JavaScript

const MixinExtends = {
  custom: 'mixin-extends'
}

const MixinMixin = {
  custom: 'mixin-mixin'
}

const Mixin = {
	extends: MixinExtends,
	mixins: [MixinMixin],
  custom: 'mixin'
}

const ExtendsMixin = {
  custom: 'extends-mixin'
}

const ExtendsExtends = {
  custom: 'extends-extends'
}

const Extends = {
  extends: ExtendsExtends,
	mixins: [ExtendsMixin],
  custom: 'extends'
}

const MyChild = {
  extends: Extends,
  mixins: [Mixin],
  template: `<div>Done: {{ $options.custom }}</div>`,
  
  custom: 'my-child'
}

const app = Vue.createApp({
  components: {
    MyChild
  }
})

app.config.optionMergeStrategies.custom = (o, n) => {
  console.log(`${o} to ${n}`)
  return n
}

app.mixin({
  custom: 'global-mixin'
})

app.mount('#app')