Nuxt Tip: Lazy Load Components in Nuxt 3
You can easily dynamically import (also known as lazy-loading) a component in Nuxt 3 by adding the Lazy
prefix to the component name:
1<template>
2 <div>
3 <LazyHelloWorld />
4 </div>
5</template>
Lazy loading can help to improve your JavaScript bundle size and thus your application's performance by only loading components when they are needed.
1<script setup lang="ts">
2const show = ref(false)
3</script>
4
5<template>
6 <div>
7 <LazyHelloWorld v-if="show" />
8 <button v-if="!show" @click="show = true">Click to lazy load HelloWorld component</button>
9 </div>
10</template>
You can use the Network tab in your browser's developer tools to verify that HelloWorld
is only loaded after the button has been clicked:
Try it yourself in this interactive StackBlitz project:
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Don't Use v-if With v-for
It can be tempting to combine v-if with v-for but you should avoid it as it will throw an error.
Vue Tip: Use Eager Computed Without Lazy Evaluation
Computed properties are evaluated lazily which means they are only evaluated when they are accessed. The computedEager() from VueUse is a good alternative for simple operations.