vuejstips.

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
previousnext

Vue 3.5 introduces `useTemplateRef()` — a cleaner, type-safe way to access template refs without relying on matching variable names.

<!-- Before (Vue 3.4) -->
<script setup>
import { ref, onMounted } from 'vue'

// variable name MUST match the ref attribute
const inputEl = ref(null)

onMounted(() => {
  inputEl.value.focus()
})
</script>

<template>
  <input ref="inputEl" />
</template>

<!-- After (Vue 3.5+) -->
<script setup>
import { useTemplateRef, onMounted } from 'vue'

const input = useTemplateRef('my-input')

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="my-input" />
</template>