Hi @grim smelt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#lazy-component
subtle tulipBOT
The "Lazy" prefix in Nuxt 3 is used for dynamically importing components, also known as lazy-loading. Here's a brief explanation of how it works and when to use it:
-
Usage: To use a lazy component, simply add the "Lazy" prefix to the component's name in your template.
-
Purpose: It delays loading the component's code until the right moment, which can help optimize your JavaScript bundle size.
-
Implementation: Nuxt automatically creates a lazy-loaded version of your components.
Here's an example of how to use a lazy component:
<template>
<div>
<h1>Mountains</h1>
<LazyMountainsList v-if="show" />
<button v-if="!show" @click="show = true">Show List</button>
</div>
</template>
<script setup lang="ts">
const show = ref(false)
</script>
In this example, the MountainsList component will only be loaded when the show variable becomes true.
It's important to note that while lazy components can improve performance, they shouldn't be overused. As mentioned in the Nuxt 3 Documentation, you should be careful not to overuse this feature.