Nuxt Tip: Lazy Load Components in Nuxt 3
Michael Hoffmann
Jun 23, 2023
| 1 min read
| 913 views
Michael Hoffmann
Jun 23, 2023
1 min read
| 913 views
Nuxt
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">
2
const 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 Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:
New Vue & Nuxt tips delivered to your inbox:
Vue Tip: Don't Use v-if With v-forJun 16, 2023
Vue Tip: Use Eager Computed Without Lazy EvaluationJun 28, 2023