How to use dynamic component in vue-class-component

user_3707143 0
Viewed 88

I use vue vue-class-component and it works fine:

import vuetify from '@/plugins/vuetify'
@Component({
    components: {
        vue2Dropzone
    },
    vuetify
})

But when I try to add new component for production only:

import store from '../store/Index'
let storeTmp = process.env.NODE_ENV === 'production' ? store : null
@Component({
    components: {
        vue2Dropzone
    },
    vuetify,
    storeTmp
})

I have the error:

Argument of type '{ components: { vue2Dropzone: any }; vuetify: Vuetify; storeTmp: Store<...> | null; }' is not assignable to parameter of type 'VueClass'.   Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'. Did you mean to write 'component'?

How can I fix it?

vue-class-components vue.js typescript javascript
2 Answers

Maybe

@Component({
    components: {
        vue2Dropzone
    },
    vuetify,
    store: storeTmp
})

?

There's no storeTmp property in the Vue instance, but there's store.

Admin1

You can use computed in this. When you want to load a component based on some condition

In Template

<component v-bind:is="importComponent" :anyPropsYouWantToPas="props" />

In Computed

importComponent() {
    if (process.env.NODE_ENV === 'production) {
        return () => import(`@/components/app/componentpath`)
    }
},
user_153278090
Related