@Gowri pointed into the right direction.
Your idea is to dynamically put components in the container.
This fiddle will show you the general idea of putting the specific name of the component to v-bind:is directive. Or shorthand :is.
I assume that you have all your templates defined and imported to the container component file. As a result, just assign them in components section and put the appropriate name to <component> tag.
List of locally registered components might look like:
components: {
'client-1': Client1Template,
'client-2': Client2Template
}
<component
:is="getComponentName"
></component>
Your getComponentName could look like:
computed: {
getComponentName: function () {
return process.env.VUE_APP_CLIENT;
}
}
Update for dynamic import ( without registering the component )
To load the template without the registration of component you could use Webpack import:
<template>
<component :is="component" v-if="component" />
</template>
<script>
export default {
data() {
return {
component: null,
}
},
computed: {
loader() {
if (!process.env.VUE_APP_CLIENT) {
return null
}
return () => import(`themes/${process.env.VUE_APP_CLIENT}/assets/views/myComponent.vue`)
},
},
mounted() {
this.loader()
.then(() => {
this.component = () => this.loader()
})
.catch(() => {
// show an error message or maybe load some default template
this.component = () => import('themes/defaultClient/assets/views/component.vue')
})
},
}
</script>
Additionally, I'd suggest you take a look at Functional Component.
It has an almost similar approach to what I've proposed but in Vue way:
https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components
Update after comments
<script lang="ts">
import { Component } from "vue-property-decorator";
import MyComponent from "@/components/MyComponent.vue";
@Component({})
export default class MyComponentClientName extends MyComponent {}
</script>