<template>
  <!-- Default: prefetch when link is visible in viewport -->
  <NuxtLink to="/about">About</NuxtLink>

  <!-- Prefetch only on hover or focus (saves bandwidth) -->
  <NuxtLink to="/heavy-page" prefetch-on="interaction">
    Heavy Page
  </NuxtLink>

  <!-- Prefetch on both visibility AND interaction -->
  <NuxtLink
    to="/dashboard"
    :prefetch-on="{ visibility: true, interaction: true }"
  >
    Dashboard
  </NuxtLink>
</template>

// nuxt.config.ts — set a global default for all NuxtLinks
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: { visibility: false, interaction: true },
      },
    },
  },
})