vue-nuxt-frontend-patterns

Vue 3 / Nuxt 3 Frontend Patterns

Composition API over Options API for new code. Reactivity is opt-in per value (ref/reactive), not automatic on plain destructuring — most "reactivity broke" bugs come from losing that connection, not from Vue itself misbehaving.

The reactivity-loss gotcha (highest-value thing to know)

Destructuring a reactive() object breaks reactivity on the destructured values — they become plain, disconnected values at the moment of destructuring:

const state = reactive({ count: 0, name: "task" });

// BROKEN: count is now a plain number, frozen at 0 forever
const { count } = state;

// CORRECT: toRefs preserves the reactive connection
const { count } = toRefs(state);

ref() values avoid this entirely because the ref object itself is passed around and only unwrapped at the point of use — prefer ref() for single values, reactive() only for grouped object state you won't destructure before the template.

Composables

A composable is a function starting with use that encapsulates reusable reactive logic — Vue's equivalent of a custom React hook, but without the rules-of-hooks ordering constraint, since Vue's reactivity doesn't depend on call order.

// composables/useDebounce.ts
export function useDebounce<T>(source: Ref<T>, delayMs: number) {
  const debounced = ref(source.value) as Ref<T>;
  let timer: ReturnType<typeof setTimeout>;
  watch(source, (value) => {
    clearTimeout(timer);
    timer = setTimeout(() => { debounced.value = value; }, delayMs);
  });
  return debounced;
}

Nuxt 3 data fetching

Use useFetch/useAsyncData inside <script setup> for SSR-safe data fetching — they dedupe requests between server and client render and integrate with Nuxt's payload serialization. Use plain $fetch only inside event handlers or outside the SSR render path (a click handler, a composable called imperatively, not during initial setup).

<script setup lang="ts">
const route = useRoute();
const { data: reservation, error, pending } = await useFetch(
  () => `/api/reservations/${route.params.id}`
);
</script>