Async Components | Vue.js
vuejs.org
Basic Usage
In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a defineAsyncComponent function: import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
1 Users
0 Comments
2 Highlights
0 Notes
Summary
Vue.js has a defineAsyncComponent function that allows developers to divide large applications into smaller chunks and only load a component from the server when it's needed. The function accepts a loader function that returns a Promise, and the Promise's resolve callback should be called when the component definition is retrieved from the server. The reject callback can be used to indicate a failed load.
Top Highlights
- Basic Usage In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a defineAsyncComponent function:
- import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent(() => { return new Promise((resolve, reject) => { // ...load component from server resolve(/* loaded component */) }) }) // ... use `AsyncComp` like a normal component As you can see, defineAsyncComponent accepts a loader function that returns a Promise. ...
Tags
code
vue
Domain
Ready to highlight and find good content?
Glasp is a social web highlighter that people can highlight and organize quotes and thoughts from the web, and access other like-minded people’s learning.