Vue 3.5 is the version Nuxt 4 runs on, and three of its additions exist specifically to make server rendering less painful. Knowing them by name, and knowing which problem each solves, is a cheap way to sound current.

Know — Vue 3.5 for SSR

• useId() produces identifiers that are stable across server and client. The correct fix for generated id, for and aria-* attributes, which were one of the classic hydration mismatches (hydration).
• useTemplateRef() replaces the "declare a ref whose name matches the attribute" convention with an explicit call, which is clearer and works with dynamic names.
• Lazy hydration strategies power Nuxt's hydrate-on-visible / -idle / -interaction / -media-query / hydrate-after / hydrate-when / hydrate-never on Lazy* components (performance).
• data-allow-mismatch whitelists an expected mismatch on one element, with values text, children, class, style, attribute (no value allows all). The escape hatch for a deliberately client-formatted timestamp.
• Reactive props destructure makes const { count } = defineProps() keep reactivity, which removes a common source of subtle bugs in shipped components.
• Vue 3.6 and Vapor mode are in release candidates. Say "release candidate" rather than describing it as shipped, and check the tags before the interview.

Know — the ecosystem by name

Know — the CLI worth muscle memory

npx nuxt upgrade --dedupe   # upgrade Nuxt and flatten duplicate installs
npx nuxt module add <name>  # install and register a module
npx nuxt typecheck          # vue-tsc against the generated tsconfigs
npx nuxt analyze            # client and server bundle treemaps
npx nuxt prepare            # regenerate .nuxt types (what postinstall runs)
npx nuxt info               # environment report to paste into a bug report
npx nuxt devtools enable    # toggle DevTools for a project

How it works

The three Vue 3.5 APIs, in the shape a layer author uses them:

<script setup lang="ts">
const { label, hint } = defineProps<{ label: string, hint?: string }>()

// Stable across server and client: no hydration mismatch on the label/input association.
const id = useId()
const input = useTemplateRef<HTMLInputElement>('input')

defineExpose({ focus: () => input.value?.focus() })
</script>

<template>
  <div class="field">
    <label :for="id">{{ label }}</label>
    <input :id="id" ref="input">
    <!-- A deliberately client-formatted value: whitelist the mismatch instead of wrapping in ClientOnly -->
    <p v-if="hint" data-allow-mismatch="text" class="hint">{{ hint }}</p>
  </div>
</template>

Exercise

Be able to say