VueNuxtViteVueTips & Tricks

Curated collection of practical tips, tricks and best practices for building modern Vue applications.

Nuxt 3.14 introduces the `shared/` folder for types and utilities that work in both server and client contexts with auto-imports.

project/
  shared/
    utils/
      format.ts            # Auto-imported everywhere
    types/
      index.ts             # Shared type definitions
  server/
    api/
      users.get.ts         # Can use shared utils
  app.vue                  # Can also use shared utils
// shared/utils/format.ts
export function formatCurrency(amount: number, currency = 'USD') {
  return new Intl.NumberFormat('en-US', {
    style: 'currency', currency
  }).format(amount)
}
<!-- app.vue — auto-imported, no import needed -->
<template>
  <p>{{ formatCurrency(99.99) }}</p>
</template>
// server/api/invoice.get.ts — same auto-import works server-side
export default defineEventHandler(() => {
  return { total: formatCurrency(250) }
})