Write better Vue and Nuxt code.

A highly curated collection of practical tips, advanced patterns, and performance tweaks for Vue & Nuxt.

useTip.ts
const { tip } = useAsyncData(
  'awesome-trick',
  () => queryContent().findOne()
)

Popular Topics
vue
nuxt
vite

Vue 3.5's `<Teleport defer>` waits until the current render cycle is complete, so you can teleport to a target rendered later in the same template.

<!-- Before (Vue 3.4) — this FAILS because #container doesn't exist yet -->
<template>
  <Teleport to="#container">
    <p>Teleported content</p>
  </Teleport>
  <div id="container"></div>
</template>
<!-- After (Vue 3.5+) — defer waits for the full render cycle -->
<template>
  <Teleport defer to="#container">
    <p>Teleported content</p>
  </Teleport>
  <div id="container"></div>
</template>