Vue Tip: Speed Up Initial Load Using Async Components
The traditional, synchronous way of loading components is:
import MyComponent from './MyComponent.vue'
In large applications, it makes sense to split the code into smaller chunks and only load it from the server when needed.
Vue 3 therefore provides the defineAsyncComponent
function:
1import { defineAsyncComponent } from 'vue'
2
3const AsyncComp = defineAsyncComponent(() => {
4 return new Promise((resolve, reject) => {
5 // ...load component from server
6 resolve(/* loaded component */)
7 })
8})
Now we can use AsyncComp
as a standard component in Vue.
Here are the docs for Async Components in Vue 3.
The syntax for Vue 2 is not that different:
const AsyncComponent = () => import('./components/LazyLoadingFTW.vue')
If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Scroll to Top When Navigating to a New Route
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does.
Vue Tip: Use Two Script Blocks
<script setup> can be used alongside normal <script>. A normal <script> may be needed in special cases.