Hi @jraez
I found a solution of extending templates by using https://github.com/mrodal/vue-inheritance-loader
This solution keeps the template syntax. The root dialog component now looks like:
<template extendable>
<q-dialog v-model="visible">
<q-card>
<q-card-section>
<div class="text-h6">Title</div>
</q-card-section>
<q-card-section class="q-pt-none">
<extension-point></extension-point>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="OK" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: 'DialogWithSlot',
data () {
return {
visible: false
}
},
methods: {
showMessage () {
this.visible = true
}
}
}
</script>
and the child dialog looks like:
<template extends="components/DialogWithSlot.vue">
<extensions>
<extension>
{{messageProp}}
</extension>
</extensions>
</template>
<script>
import DialogWithSlot from 'components/DialogWithSlot.vue'
export default {
name: 'DialogWithSlotImpl',
extends: DialogWithSlot,
props: ['messageProp'],
data () {
return {
}
}
}
</script>
Looks very easy and straight forward to me.