Vue-class-component: Support for async components

[mtatarau90]

Hi, guys

I try to lazy load some components, and work fine if i use the classic way with: my-component': () => import('./my-async-component'), but i want try to create a factory object like in vue documentation

const AsyncComponent = () => ({
  // The component to load (should be a Promise)
  component: import('./MyComponent.vue'),
  // A component to use while the async component is loading
  loading: LoadingComponent,
  // A component to use if the load fails
  error: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

@Component({
  components: {
    AsyncComponent
  }
})
class App extends Vue {}

But it gave me an error " Object literal may only specify known properties, but 'components' does not exist in type 'VueClass'. Did you mean to write 'component'?".

Now my question is, i do something wrong? or vue-class-component do not support this feature?

[ktsn]

Please provide a self-contained reproduction, thanks!

[exodusanto]

Hi @ktsn I have the same error

Form.vue

@Component({
  components: {
    Btn,
    InputText,
  },
})
export default class Form extends Vue {

index.ts

export const Btn = () => import('./Btn.vue');
export const InputText = () => ({
  component: import('./Input/InputText.vue'),
  delay: 0,
  loading: InputPlaceholder,
});

Error

Argument of type '{ components: { Btn: Component<DefaultData<never>, DefaultMethods<never>, DefaultC...' is not assignable to parameter of type 'VueClass<Vue>'.
  Object literal may only specify known properties, but 'components' does not exist in type 'VueClass<Vue>'. Did you mean to write 'component'?

[exodusanto]

I try to set component type to anyand it works

export const InputText = () => ({
  component: import('./Input/InputText.vue') as any,
  delay: 0,
  loading: InputPlaceholder,
});

[ktsn]

Thanks for the info but that is not a reproduction. Reproductions should be executable and able to confirm the problem comprehensively. You can use jsfiddle, GitHub repo etc to make it.

[ktsn]

Closing until reproduction is provided. Please open a new issue if the problem persists and anyone can provide a reproduction. Thank you.

[Lstoryc]

same issue. Is there any news?

[hckhanh]

I have the same issue. I cannot use it with typescript

[paolog22]

same here

[mtatarau90]

Hi guys, i let you here a workaround

const AsyncComponent = () => ({
  component: import('.....'),
  loading: LoadingComponent,
}) as any;

@Component({
  components: {
    AsyncComponent,
    // or directly
    'async-xxx': () => ({
        component: import('...'),
        loading: LoadingComponent,
     }) as any,
  }
})
class App extends Vue {}

[paolog22]

Hi @mtatarau90 thank you but is there a way without casting it to 'any' ?

[mtatarau90]

Hi @paolog22,

this was the only way that works for me, but was one years ago, I didn't try another approach.

[paolog22]

@mtatarau90 thanks for the reply.