The built-in components and the lifecycle are where "Vue knowledge" meets "SSR knowledge". Nuxt wraps every page in <Suspense>, teleports to body are a classic hydration trap, and onMounted not running on the server explains half of all "works in dev, breaks in production" bugs. Interviewers ask about these because the answers show whether you have shipped a server-rendered app.

Know

• Lifecycle order: setup → onBeforeMount → onMounted → (onBeforeUpdate → onUpdated)* → onBeforeUnmount → onUnmounted. Children mount before the parent's onMounted fires. onErrorCaptured catches descendant errors, onActivated/onDeactivated pair with KeepAlive, onServerPrefetch runs only on the server.
• On the server only setup and onServerPrefetch run. No mount, no update, no unmount: anything registered with setInterval or addEventListener in setup on the server never gets cleaned up (a leak) or never gets registered (a no-op). DOM access belongs in onMounted.
• Updates are asynchronous. After a mutation the DOM is stale until the scheduler flushes; await nextTick() before measuring or focusing. Tests do the same.
• <Suspense> waits for async setup (top-level await) and async components in its default slot, showing #fallback meanwhile; it emits pending/resolve/fallback. The Vue docs still mark it experimental, but Nuxt builds page rendering and useAsyncData on it, so you have used it in every Nuxt app. Errors inside are caught with onErrorCaptured on an ancestor.
• <Teleport to="body"> moves the DOM while keeping the component in its logical tree, so provide/inject and props still work. defer (3.5) waits for a target rendered later in the same tick. On the server, teleported content is rendered separately and Nuxt stitches body teleports into the HTML; a target that differs between server and client is a hydration mismatch.
• <KeepAlive include exclude max> caches component instances instead of destroying them; onActivated/onDeactivated replace mount/unmount for cached components. It trades memory for state preservation; max bounds it. In Nuxt: definePageMeta({ keepalive: true }) or <NuxtPage keepalive>.
• <Transition> and <TransitionGroup> apply enter/leave classes (v-enter-from, v-enter-active, v-enter-to) or JavaScript hooks; mode="out-in" avoids two elements overlapping. Respect prefers-reduced-motion.
• Async components via defineAsyncComponent({ loader, loadingComponent, errorComponent, delay, timeout }) code-split at the component boundary. Nuxt's Lazy prefix does this automatically and adds the 3.5 hydration strategies (hydrate-on-visible, hydrate-on-idle, hydrate-on-interaction, hydrate-never).
• Templates compile to optimised render functions: static nodes are hoisted, dynamic bindings get patch flags so the diff checks only what can change, and event handlers are cached. v-memo skips a subtree unless its dependencies changed; v-once renders once. Hand-written render functions with h() or JSX lose those hints, so use them only for genuinely dynamic trees.
• Keys. key identifies an element across renders. Using the array index for reorderable or filterable lists breaks state and transitions; changing a key deliberately forces a remount, which is the cleanest way to reset a component.
• Template refs. useTemplateRef('name') (3.5) replaces the "ref named like the variable" convention. Refs inside v-for give an array whose order is not guaranteed. Function refs exist for dynamic cases.

How it works

Suspense, an async component and an error boundary together:

<script setup lang="ts">
const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  delay: 200, // do not flash the loading state for fast loads
  timeout: 10_000,
})

const failed = ref<Error | null>(null)
onErrorCaptured((err) => {
  failed.value = err as Error
  return false // stop propagation; we rendered a fallback
})
</script>

<template>
  <div v-if="failed" role="alert">Could not load the dashboard: {{ failed.message }}</div>
  <Suspense v-else>
    <template #default>
      <HeavyChart />
    </template>
    <template #fallback>
      <USkeleton class="h-64 w-full" />
    </template>
  </Suspense>
</template>

Measuring after an update, and focusing a teleported dialog:

<script setup lang="ts">
const open = defineModel<boolean>({ default: false })
const panel = useTemplateRef<HTMLDivElement>('panel')

watch(open, async (isOpen) => {
  if (!isOpen) return
  await nextTick() // the Teleport content exists only after the flush
  panel.value?.querySelector<HTMLElement>('[autofocus], button')?.focus()
})
</script>

<template>
  <Teleport to="body">
    <div v-if="open" ref="panel" role="dialog" aria-modal="true" class="dialog">
      <slot />
    </div>
  </Teleport>
</template>

A render function where a template would be awkward: a component that renders a tree of arbitrary depth:

import { h, type PropType } from 'vue'

interface Node { label: string, children?: Node[] }

export default defineComponent({
  name: 'TeamTree',
  props: { nodes: { type: Array as PropType<Node[]>, required: true } },
  setup(props) {
    const render = (nodes: Node[]): ReturnType<typeof h> =>
      h('ul', nodes.map(node => h('li', { key: node.label }, [
        node.label,
        node.children?.length ? render(node.children) : null,
      ])))
    return () => render(props.nodes)
  },
})

Exercise

Be able to say