question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support for async components

See original GitHub issue

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<Vue>’. Did you mean to write ‘component’?".

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:12 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
ktsncommented, May 13, 2019

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

4reactions
exodusantocommented, Apr 4, 2019

I try to set component type to anyand it works

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

github_iconTop Results From Across the Web

Async components
Such a component is called an async component. An async component can render its state in a meaningful way like any other component,...
Read more >
Async Components - Vue.js
As you can see, defineAsyncComponent accepts a loader function that returns a Promise. The Promise's resolve callback should be called when you have...
Read more >
React Gets First Class Support for Async/Await — Yay or Meh?
The first cornerstone of React's first-class support for Async/Await started when ... React Server Components: supporting the native async/await Es7 syntax.
Read more >
RFC: First class support for promises and async/await #229
Introduces support for async/await in Server Components. Write Server Components using standard JavaScript await syntax by defining your component as an ...
Read more >
How To Handle Async Data Loading, Lazy Loading, and Code ...
When you use React functional components for example, asynchronous functions can create infinite loops. When a component loads, it can start an ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found