Hello, I am currently navigating the world of Vue for the first time. My project utilizes Vue2, Nuxt, and Vuetify to bring it all together.
One thing I am looking to do is create a base .vue component, as well as multiple components that inherit from this base.
Take, for instance, my base dialog named MyDialog.vue:
<template>
<v-dialog v-model="isShowDialog" persistent>
<v-card>
<v-card-title> My Base Dialog </v-card-title>
<!-- inherited UI logic goes here -->
<v-card-actions>
<v-btn @click="closeDialog"> Close </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
data() {
return {
isShowDialog: true,
}
},
methods: {
closeDialog() {
this.isShowDialog = false
},
}
}
</script>
As for the derived components, I have plans to create ImageDialog.vue, LoginFormDialog.vue, ComplexDialog.vue, each adding its unique child UI and logic on top of the base MyDialog.vue.
Is there a way I can achieve something like the following:
<MyDialog>
<div>
<span>This is an image</span>
<img src="...">
</div>
</MyDialog>
Are there any specific resources or documentation you would recommend I start with?