Vue & Nuxt tips

<template>
  <pre><code>{{ example }}</code></pre>
</template>

<script setup>
import { ref, watch } from 'vue'

const filters = ref({ query: '', page: 1 })
const appliedFilters = ref({ ...filters.value })

const { pause, resume } = watch(filters, (value) => {
  appliedFilters.value = { ...value }
}, { deep: true })

function resetFilters() {
  pause()
  filters.value.query = ''
  filters.value.page = 1
  resume()
}
</script>

<script setup>
import { ref, watch } from 'vue'

const hasEdited = ref(false)
const showHint = ref(true)

watch(hasEdited, () => {
  showHint.value = false
}, { once: true })
</script>

<template>
  <input @input="hasEdited = true">
  <p v-if="showHint">Start typing to edit.</p>
</template>

<script setup>
import { ref, watch } from 'vue'

const items = ref([{ id: 1, name: 'First' }])

watch(items, () => {
  console.log('Array changed')
}, { deep: 1 })

// Triggers the watcher
items.value.push({ id: 2, name: 'Second' })

// Does not trigger it
items.value[0].name = 'Renamed'
</script>

<!-- app.vue — auto-imported, no import needed -->
<template>
  <p>{{ formatCurrency(99.99) }}</p>
</template>

<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>

<!-- pages/(marketing)/about.vue -->
<template>
  <div>
    <!-- URL is /about, NOT /(marketing)/about -->
    <h1>About Us</h1>
  </div>
</template>

<!-- pages/[...slug].vue -->
<script setup>
const { enabled, state } = usePreviewMode()
</script>

<template>
  <div>
    <div v-if="enabled" class="preview-banner">
      Preview mode is active
    </div>
    <ContentRenderer :value="page" />
  </div>
</template>

<script setup>
import {
  defineAsyncComponent,
  hydrateOnVisible,
  hydrateOnIdle,
  hydrateOnInteraction,
} from 'vue'

// Hydrate when the component scrolls into view
const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  hydrate: hydrateOnVisible(),
})

// Hydrate when the browser is idle
const AdBanner = defineAsyncComponent({
  loader: () => import('./AdBanner.vue'),
  hydrate: hydrateOnIdle(5000),
})

// Hydrate on specific user interactions
const Dropdown = defineAsyncComponent({
  loader: () => import('./Dropdown.vue'),
  hydrate: hydrateOnInteraction(['click', 'mouseover']),
})
</script>

<template>
  <HeavyChart />
  <AdBanner />
  <Dropdown />
</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>

<script setup>
import { ref, watch, onWatcherCleanup } from 'vue'

const userId = ref(1)

watch(userId, (newId) => {
  const controller = new AbortController()

  fetch(`/api/users/${newId}`, { signal: controller.signal })
    .then(r => r.json())
    .then(data => { /* handle data */ })

  // If userId changes before fetch completes, abort the previous request
  onWatcherCleanup(() => {
    controller.abort()
  })
})
</script>

<!-- Also works inside watchEffect -->
<script setup>
import { ref, watchEffect, onWatcherCleanup } from 'vue'

const searchQuery = ref('')

watchEffect(() => {
  const controller = new AbortController()

  fetch(`/api/search?q=${searchQuery.value}`, {
    signal: controller.signal
  })
    .then(r => r.json())
    .then(data => { /* update results */ })

  onWatcherCleanup(() => controller.abort())
})
</script>

<script setup>
import { useId } from 'vue'

const id = useId()
</script>

<template>
  <form>
    <label :for="id">Email:</label>
    <input :id="id" type="email" />
  </form>
</template>

<!-- Each component instance gets its own unique ID -->
<script setup>
import { useId } from 'vue'

defineProps<{ label: string }>()

const id = useId()
</script>

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <select :id="id">
      <slot />
    </select>
  </div>
</template>

<!-- 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>

<!-- Before (Vue 3.4) -->
<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    count?: number
    message?: string
  }>(),
  {
    count: 0,
    message: 'hello',
  }
)
</script>

<!-- After (Vue 3.5+) -->
<script setup lang="ts">
const { count = 0, message = 'hello' } = defineProps<{
  count?: number
  message?: string
}>()
</script>

<template>
  <p>{{ count }} - {{ message }}</p>
</template>

<!-- before defineModel -->
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <input
    :value="props.modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

<!-- after defineModel -->
<script setup>
const model = defineModel();
</script>

<template>
  <input v-model="model" />
</template>

<script setup>
// this doesn't need to be wrapped in ref()
// no need for reactivity here
const links = [
  {
    name: 'about',
    href: '/about'
  },
  {
    name: 'terms of service',
    href: '/tos'
  },
  {
    name: 'contact us',
    href: '/contact'
  }
]

// isActive flag needs to be reactive to reflect UI changes
// that's why it's a good idea to wrap tabs into ref
const tabs = ref([
  {
    name: 'Privacy',
    url: '/privacy',
    isActive: true
  },
  {
    name: 'Permissions',
    url: '/permissions',
    isActive: false
  }
])
</script>

<template>
<!-- You can now shorten this: -->
<img :id="id" :src="src" :alt="alt">

<!-- To this: -->
<img :id :src :alt>
</template>

<style scoped>
button {
  background-color: v-bind(backgroundColor);
}
</style>

<script setup>
import { useQuery } from '@tanstack/vue-query'

async function fetchPosts() {
  const response = await fetch('/api/posts')
  if (!response.ok) {
    throw new Error(`Request failed: ${response.status}`)
  }
  return response.json()
}

const { data: posts, isPending, isError, error } = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
})
</script>

<template>
  <p v-if="isPending">Loading posts...</p>
  <p v-else-if="isError">{{ error.message }}</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

<style scoped>
:global(.red) {
  color: red;
}
</style>

<script setup lang="ts">
export interface Props {
  variant?: 'primary' | 'secondary'
  disabled?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  disabled: false
})
</script>

<script setup lang="ts">
const search = ref('')
const { data: sections } = await useAsyncData(
  'content-search',
  () => queryCollectionSearchSections('content')
)

const results = computed(() => {
  const query = search.value.trim().toLowerCase()
  if (!query) return []

  return (sections.value ?? []).filter(section =>
    `${section.title} ${section.content}`
      .toLowerCase().includes(query)
  )
})
</script>

<template>
  <label for="search">Search documentation</label>
  <input id="search" v-model="search" type="search">
  <ul>
    <li v-for="result in results" :key="result.id">
      <NuxtLink :to="result.id">{{ result.title }}</NuxtLink>
    </li>
  </ul>
</template>

<script setup lang="ts">
const route = useRoute()
const { data: surround } = await useAsyncData(
  `surround-${route.path}`,
  () => queryCollectionItemSurroundings('content', route.path)
    .order('title', 'ASC')
)
</script>

<template>
  <nav aria-label="Article navigation">
    <NuxtLink v-if="surround?.[0]" :to="surround[0].path">
      ← {{ surround[0].title }}
    </NuxtLink>
    <NuxtLink v-if="surround?.[1]" :to="surround[1].path">
      {{ surround[1].title }} →
    </NuxtLink>
  </nav>
</template>

<script setup>
// enables v-focus in templates
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

<style scoped>
:slotted(div) {
  color: red;
}
</style>

<template>
<KeepAlive>
  <component :is="activeComponent" />
</KeepAlive>
</template>

<!-- 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>

<template>
  <Suspense>
    <!-- component with nested async dependencies -->
    <Dashboard />

    <!-- loading state via #fallback slot -->
    <template #fallback>
      Loading...
    </template>

  </Suspense>
</template>

<!-- components/Hello.vue -->
<template>
    <div>
        <h1>Hello</h1>
        {{ date }}
    </div>
</template>

<script setup lang="ts">
import moment from 'moment';
const date = moment().format('MMMM Do YYYY, h:mm:ss a');
</script>

<!-- app.vue -->
<template>
    <NuxtIsland name="Hello" />
</template>

<template>
  <Teleport to="body">
    <div v-if="open" class="modal">
      <p>Hello from the modal!</p>
      <button @click="open = false">Close</button>
    </div>
  </Teleport>
  </template>

<script setup>
import { shallowRef } from 'vue'
import UserSettings from './UserSettings.vue'
import UserNotifications from './UserNotifications.vue'

const activeComponent = shallowRef(UserSettings)
</script>

<template>
  <button @click="activeComponent = UserSettings">Settings</button>
  <button @click="activeComponent = UserNotifications">Notifications</button>
  <component :is="activeComponent" />
</template>

<script setup lang="ts">
const websiteConfig = useState('config')

await callOnce(async () => {
  console.log('This will only be logged once')
  websiteConfig.value = await $fetch('https://my-cms.com/api/website-config')
})
</script>

<template>
  <!-- you can use this -->
  <BlogPost is-published />

  <!-- instead of this -->
  <BlogPost :is-published="true" />
</template>

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

<script setup lang="ts">
const tokenCookie = useCookie('token')

const login = async (username, password) => {
  const token = await $fetch('/api/token', { ... }) // Sets `token` cookie on response
  refreshCookie('token')
}

const loggedIn = computed(() => !!tokenCookie.value)
</script>

<template>
  <Table class="py-2"></Table>
</template>

<template>
  <table class="border-solid border-2 border-sky-500">
    <!-- ... -->
  </table>
</template>

<template>
  <table class="border-solid border-2 border-sky-500 py-2">
    <!-- ... -->
  </table>
</template>