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

In Vue.js, you can pass multiple named slots to your child components.

<!-- Child component / Input.vue -->
<template>
  <div class="input-wrapper">
    <label>
      <slot name="label" />
    </label>
    <input />
    <div class="input-icon">
      <slot name="icon" />
    </div>
  </div>
</template>

<!-- Parent component -->
<template>
  <Input>
    <template #label>
      Email
    </template>
    <template #icon>
      <EmailIcon />
    </template>
  </Input>
</template>