To incorporate the vuetify instance into the extended Vue constructor, simply follow the same process as you would when initializing the main Vue instance.
MainWindow.vue
<template>
<v-app>
<v-btn @click="addTable" color="red">Generate Data-Table</v-btn>
<hr>
<v-btn @click="addCard">Generate simple Card</v-btn>
<v-container ref="mainContainer"></v-container>
</v-app>
</template>
<script>
import Table from "./Table.vue";
import Card from "./Card.vue";
import Vue from "vue";
import vuetify from "../plugins/vuetify";
export default {
name: "mainWindow",
components: { Table, Card },
methods: {
addTable() {
var ComponentClass = Vue.extend(Table);
var instance = new ComponentClass({ vuetify });
instance.$mount();
this.$refs.mainContainer.appendChild(instance.$el);
},
addCard() {
var ComponentClass = Vue.extend(Card);
var instance = new ComponentClass({});
instance.$mount();
this.$refs.mainContainer.appendChild(instance.$el);
}
}
};
</script>
<style>
</style>
Note: It is worth mentioning that this method of using dynamic components in Vue is not recommended!
The article we referenced explains:
In my scenario, I am unaware of which component needs to be inserted in the template and where it should be placed. This information only becomes available during runtime.
This technique proves beneficial only when the location of insertion is unknown. If you are aware of both the "where" and "which", utilizing Dynamic Components is a more suitable approach.