VueNuxtViteVueTips & Tricks

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

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

// nuxt.config.ts — set a global default for all NuxtLinks
export default defineNuxtConfig({
  experimental: {
    defaults: {
      nuxtLink: {
        prefetch: true,
        prefetchOn: { visibility: false, interaction: true },
      },
    },
  },
})

pages/
  index.vue                  →  /
  (marketing)/
    about.vue                →  /about
    contact.vue              →  /contact
  (shop)/
    products.vue             →  /products
    cart.vue                 →  /cart
  (auth)/
    login.vue                →  /login
    register.vue             →  /register

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

// Activate by visiting: /my-page?preview=true&token=my-secret

// You can also customize the enable check:
const { enabled, state } = usePreviewMode({
  shouldEnable: () => {
    return route.query.preview === 'true'
      && route.query.token === 'my-secret'
  },
  getState: (currentState) => {
    return { token: route.query.token, ...currentState }
  },
})

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

const state = shallowRef({ count: 1 })

// does NOT trigger change
state.value.count = 2

// does trigger change
state.value = { count: 2 }

const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()

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

// overusing this data fetching pattern in many components?c
const posts = ref([]);
const isLoading = ref(false);
const isError = ref(false);

async function fetchPosts() {
  isLoading.value = true;
  isError.value = false;
  try {
    const response = await fetch('someurl');
    posts.value = await response.json();
  } catch(error) {
    isError.value = true;
  } finally {
    isLoading.value = false;
  }
}

onMounted(() => {
  fetchPosts();
})

// you can replace it with a few lines of code thanks to Tanstack Query (Vue Query) ✅
const {data: posts, isLoading, isError} = useQuery({
  queryKey: ['posts'],
  queryFn: fetchPosts
})

async function fetchPosts() {
  const response = await fetch('someurl');
  const data = await response.json();
  return data;
}

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

install the package

npm install -D @nuxtjs/fontaine

and set the module inside nuxt.config

export default defineNuxtConfig({
  modules: ['@nuxtjs/fontaine'],
})

And that's it!

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

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

first you have to enable this option in your nuxt.config.ts

export default defineNuxtConfig({
  content: {
    experimental: {
      search: true
    }
  }
})

and then use it in your components

<script lang="ts" setup>
const search  = ref('')

const results = searchContent(search)
</script>

<template>
  <main>
    <input v-model="search">

    <pre>{{ results }} </pre>
  </main>
</template>

<script setup lang="ts">
const route = useRoute();

const [prev, next] = await queryContent()
    .only(['_path', 'title'])
    .sort({ date: -1 })
    .findSurround(route.path);
</script>

<template>
<NuxtLink v-if="prev" :to="prev._path">
    <span>previous</span>
</NuxtLink>
</template>

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

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

// vite.config.ts
export default defineConfig({  
  plugins: [
    vue(),
  ],
  resolve: {
    alias: [
      {
        find: '@',
        replacement: fileURLToPath(new URL('./src', import.meta.url))
      },
    ]
  }
})

// tsconfig.ts
{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  }
}

// Thanks to the absolute path import aliases,
// the import statement looks the same for every component.
import Button from '@/components/Button.vue'
import Dropdown from '@/components/Dropdown.vue'

// By using relative imports, the import statements can vary between files
import Button from './Button.vue'
import Button from './../Button.vue'
import Dropdown from './components/Dropdown.vue'

// api/routes/sitemap.ts
import { SitemapStream, streamToPromise } from 'sitemap';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const docs = await serverQueryContent(event).find();

    const staticSites = [
        {
            _path: '/'
        },
        {
            _path: '/about'
        },
        {
            _path: '/open-source'
        }
    ];

    const sitemapElements = [...staticSites, ...docs];

    const sitemap = new SitemapStream({
        hostname: import.meta.env.VITE_BASE_URL as string
    });

    for (const doc of sitemapElements) {
        sitemap.write({
            url: doc._path,
            changefreq: 'monthly'
        });
    }

    sitemap.end();
    return streamToPromise(sitemap);
});

// api/routes/rss.ts
import RSS from 'rss';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const BASE_URL = 'https://your-domain.com';

    const feed = new RSS({
        title: 'Your title',
        site_url: BASE_URL,
        feed_url: `${BASE_URL}/rss.xml`
    });

    const docs = await serverQueryContent(event)
        .sort({ date: -1 })
        .where({ _partial: false })
        .find();

    for (const doc of docs) {
        feed.item({
            title: doc.title ?? '-',
            url: `${BASE_URL}${doc._path}`,
            date: doc.date,
            description: doc.description
        });
    }

    const feedString = feed.xml({ indent: true });

    setHeader(event, 'content-type', 'text/xml');

    return feedString;
});

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

// This feature is still experimental so you have to enable it in nuxt.config
export default defineNuxtConfig({
  experimental: {
    componentIslands: true
  }
})

Let's say that you have a JS-rich component, but you don't need the code of that library in your production bundle. One example could be using a heavy date manipulation library like moment.js. We just want to format some data and show users the result. It's a perfect use case for server components. You are running JS on the server and returning HTML without any JS to the browser.

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

All you have to do is move your component into the /components/islands directory and then call the component.

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

const app = createApp(App);

app.config.performance = true;

app.mount('#app');

<script setup>
import UserSettings from './Foo.vue'
import UserNotifications from './Bar.vue'

const activeComponent = ref(UserSettings);
</script>

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

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg" />

<input v-model.number="age" />

<input v-model.trim="msg" />

npx nuxt dev --tunnel

npx nuxt dev --https

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

parent component

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

child component Table.vue

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

classes from the parent and child will be merged together

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

import {browserslistToTargets} from 'lightningcss';

export default {
    css: {
        transformer: 'lightningcss',
        lightningcss: {
            targets: browserslistToTargets(browserlist('>= 0.25%'))
        }
    },
    build: {
        cssMinify: 'lightningcss'
    }
}

You can enable custom formatters in Chrome (Chromium) DevTools by selecting the option "Console -> Enable custom formatters."

Here you have it! 🥳

https://devtools-next.vuejs.org/