Vue · all subjects

compiler/macros

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

compiler macro definition

A compiler macro is special code processed by a compiler and converted into something else. It is effectively a clever form of string replacement. Vue's SFC compiler supports macros such as defineProps(), defineEmits(), and defineExpose(). These macros are intentionally designed to look like normal JavaScript functions so they can leverage the same parser and type inference tooling, but they are not actual functions run in the browser.

compiler macro limitations

Compiler macros have limitations on their use that don't apply to normal JavaScript code. For example, creating an alias like const dp = defineProps will result in an error. There are also limitations on what values can be passed to defineProps(), as the arguments have to be processed by the compiler and not at runtime.

defineProps and defineEmits are compiler macros

defineProps and defineEmits are compiler macros automatically available inside <script setup>. They do not need to be imported and are compiled away when <script setup> is processed. defineProps accepts the same value as the props option, while defineEmits accepts the same value as the emits option.

defineProps and defineEmits type inference

defineProps and defineEmits provide proper type inference based on the options passed. The options passed will be hoisted out of setup into module scope, so they cannot reference local variables declared in setup scope. However, they can reference imported bindings since those are in module scope.

Type-only props and emit declarations

Props and emits can be declared using pure-type syntax by passing a literal type argument to defineProps or defineEmits. defineProps or defineEmits can only use either runtime declaration OR type declaration, not both simultaneously. When using type declaration, equivalent runtime declaration is automatically generated from static analysis.

Type declaration runtime generation for props

In dev mode, the compiler infers corresponding runtime validation from types (e.g., foo: String is inferred from foo: string type). Imported types are resolved if TypeScript is installed as a peer dependency. In prod mode, the compiler generates array format declaration to reduce bundle size (props are compiled into array format like ['foo', 'bar']).

Generic type parameters in defineProps version 3.3+

In version 3.2 and below, generic type parameters for defineProps() were limited to a type literal or a reference to a local interface. In 3.3+, the latest version of Vue supports referencing imported and a limited set of complex types. Conditional types are not supported for the entire props object, though they can be used for the type of a single prop.

defineOptions macro availability and usage

defineOptions is only supported in Vue 3.3+. This macro declares component options directly inside <script setup> without a separate <script> block. Example: defineOptions({ inheritAttrs: false, customOptions: {} }). The options are hoisted to module scope and cannot access local variables in <script setup> that are not literal constants.

Give your agent this brain