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:

<template>
  <div>
    <LazyHelloWorld />
  </div>
</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.

<script setup lang="ts">
const show = ref(false)
</script>

<template>
  <div>
    <LazyHelloWorld v-if="show" />
    <button v-if="!show" @click="show = true">Click to lazy load HelloWorld component</button>
  </div>
</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: