The reference is what you are quizzed on when the interviewer wants precision: "which directive skips compilation", "what does v-bind.prop do", "what is v-cloak for", "which flag exposes hydration mismatch details in production". This page is the map; the API pages are the territory.
createApp(), createSSRApp(), app.mount(), app.unmount(), app.onUnmount() (3.5), app.component(), app.directive(), app.use(), app.mixin(), app.provide(), app.runWithContext(), app.version.app.config: errorHandler, warnHandler, performance, compilerOptions (isCustomElement, whitespace, delimiters, comments), globalProperties, optionMergeStrategies, idPrefix (3.5, prefixes useId), throwUnhandledErrorInProduction (3.5).version, nextTick(), defineComponent(), defineAsyncComponent().v-text, v-html, v-show, v-if / v-else / v-else-if, v-for, v-on (@), v-bind (:), v-model, v-slot (#), v-pre (skip compilation of the element and children; shows raw mustaches), v-once (render once, then treat as static), v-memo (skip updates unless the dependency array changed; with v-for it must be on the same element), v-cloak (attribute removed when compilation finishes; used with [v-cloak] { display: none } to hide un-compiled in-DOM templates).v-bind modifiers: .camel (camelize the attribute name in in-DOM templates), .prop (force a DOM property; shorthand .prop-name), .attr (force an attribute). v-on modifiers: the event, key, system and mouse modifiers, plus .passive, .capture, .once, .self, .stop, .prevent. v-model modifiers: .lazy, .number, .trim.<Transition>, <TransitionGroup>, <KeepAlive>, <Teleport>, <Suspense>.<component :is> (string or component; native tags by name), <slot>, <template> (with a directive it is a wrapper; with #slot it is slot content; otherwise a native element).key (identity hint, forces replacement when changed), ref (template ref), is (dynamic component; vue: prefix makes a native element render as a component in in-DOM templates).<template> and one normal <script>, plus one <script setup>; any number of <style>; custom blocks. lang for pre-processors, src imports, comments in HTML syntax, automatic name inference from the filename.<script setup>: top-level bindings are exposed to the template; imports too (usable directly, including components and v directives); compiler macros defineProps, defineEmits, defineModel, defineExpose, defineOptions, defineSlots; useSlots()/useAttrs(); may coexist with a normal <script> for named exports or options that need it; top-level await makes the component async (requires Suspense); generics attribute; restrictions: no src attribute and no in-DOM templates.v-bind().useAttrs(), useSlots(), useModel() (the runtime behind defineModel), useTemplateRef() (3.5), useId() (3.5).isRef, unref, toRef, toValue (3.3), toRefs, isProxy, isReactive, isReadonly, isShallow.shallowRef, triggerRef, customRef, shallowReactive, shallowReadonly, toRaw, markRaw, effectScope, getCurrentScope, onScopeDispose.provide, inject, hasInjectionContext() (3.3).define): __VUE_OPTIONS_API__ (default true), __VUE_PROD_DEVTOOLS__ (false), __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ (false; enable to see mismatch details in production).renderToString, renderToNodeStream, pipeToNodeWritable, renderToWebStream, pipeToWebWritable, renderToSimpleStream, useSSRContext(), data-allow-mismatch.defineCustomElement(), useHost(), useShadowRoot(), this.$host. Render function: h, mergeProps, cloneVNode, isVNode, resolveComponent, resolveDirective, withDirectives, withModifiers. Custom renderer: createRenderer().<script setup lang="ts">
const raw = '{{ not compiled }}'
const el = useTemplateRef<HTMLDivElement>('box')
const id = useId()
const list = ref([{ id: 1, selected: false }])
</script>
<template>
<!-- v-pre: children are not compiled; the mustaches render literally -->
<span v-pre>{{ raw }}</span>
<!-- v-bind modifiers: force a DOM property, force an attribute -->
<my-element :value.prop="list" :data-id.attr="id" />
<!-- v-memo with v-for must sit on the same element -->
<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
{{ item.id }}
</div>
<!-- vue: prefix makes a native element render as a component (in-DOM templates) -->
<table><tr is="vue:my-row" /></table>
<div ref="box" v-once>{{ id }}</div>
</template>
export default defineConfig({
define: {
__VUE_OPTIONS_API__: 'false', // drop Options API support from the bundle
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true', // debug mismatches in production builds
},
})
Inside v-for, v-memo must be on the same element as v-for; placing it on a child does nothing useful and the docs call this out. Its dependency array is the only thing compared, so leaving a value out means stale output.
{{ 1 + 1 }} inside v-pre and outside it; then write a v-cloak style and load an in-DOM template slowly to see it work.__VUE_OPTIONS_API__ to false in a Vite project that has one Options API component and read the failure..prop to pass an object to a custom element and .attr to force an attribute; inspect the element in devtools."v-pre tells the compiler to skip the element and its children, so mustaches render literally, which is what you want for showing template syntax. v-once renders the element once and then treats it as static, skipping it in every later patch. v-memo takes an array of dependencies and skips updating the subtree unless one of them changed, and when combined with v-for it has to sit on the same element. v-cloak is an attribute Vue removes once compilation finishes; paired with a [v-cloak] { display: none } rule it hides un-compiled in-DOM templates until Vue is ready."
Nothing yet. Notes filed here show up on this page and the section overview.
Extra topics — internals and the edges
Ways of Using Vue, the Composition API FAQ, Reactivity in Depth, the Rendering Mechanism, Render Functions and JSX, Vue and Web Components, and Animation Techniques, as the guide presents them.
Nuxt docs, chapter by chapter
How to use this section to learn the official Nuxt 4 documentation thoroughly — getting started, concepts, every directory, going further, and the full API reference — and quiz yourself on it.