Glossary | Vue.js

This glossary is intended to provide some guidance about the meanings of technical terms that are in common usage when talking about Vue. It is intended to be descriptive of how terms are commonly used, not a prescriptive specification of how they must be used. Some terms may have slightly different meanings or nuances depending on the surrounding context.
An async component is a wrapper around another component that allows for the wrapped component to be lazy loaded. This is typically used as a way to reduce the size of the built .js files, allowing them to be split into smaller chunks that are loaded only when required.
Vue Router has a similar feature for the lazy loading of route components, though this does not use Vue's async components feature.
For more details see:
A compiler macro is special code that is processed by a compiler and converted into something else. They are effectively a clever form of string replacement.
Vue's SFC compiler supports various macros, such as defineProps(), defineEmits() and defineExpose(). These macros are intentionally designed to look like normal JavaScript functions so that they can leverage the same parser and type inference tooling around JavaScript / TypeScript. However, they are not actual functions that are run in the browser. These are special strings that the compiler detects and replaces with the real JavaScript code that will actually be run.
Macros have limitations on their use that don't apply to normal JavaScript code. For example, you might think that const dp = defineProps would allow you to create an alias for defineProps, but it'll actually 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.
For more details see:
The term component is not unique to Vue. It is common to many UI frameworks. It describes a chunk of the UI, such as a button or checkbox. Components can also be combined to form larger components.
Components are the primary mechanism provided by Vue to split a UI into smaller pieces, both to improve maintainability and to allow for code reuse.
A Vue component is an object. All properties are optional, but either a template or render function is required for the component to render. For example, the following object would be a valid component:
In practice, most Vue applications are written using Single-File Components (.vue files). While these components may not appear to be objects at first glance, the SFC compiler will convert them into an object, which is used as the default export for the file. From an external perspective, a .vue file is just an ES module that exports a component object.
The properties of a component object are usually referred to as options. This is where the Options API gets its name.
The options for a component define how instances of that component should be created. Components are conceptually similar to classes, though Vue doesn't use actual JavaScript classes to define them.
The term component can also be used more loosely to refer to component instances.
For more details see:
The word 'component' also features in several other terms:
The term composable describes a common usage pattern in Vue. It isn't a separate feature of Vue, it's just a way of using the framework's Composition API.
As with many patterns, there can be some disagreement about whether specific code qualifies for the label. Not all JavaScript utility functions are composables. If a function doesn't use the Composition API then it probably isn't a composable. If it doesn't expect to be called during the synchronous execution of setup() then it probably isn't a composable. Composables are specifically used to encapsulate stateful logic, they are not just a naming convention for functions.
See Guide - Composables for more details about writing composables.
The Composition API is a collection of functions used to write components and composables in Vue.
The term is also used to describe one of the two main styles used to write components, the other being the Options API. Components written using the Composition API use either <script setup> or an explicit setup() function.
See the Composition API FAQ for more details.
A custom element is a feature of the Web Components standard, which is implemented in modern web browsers. It refers to the ability to use a custom HTML element in your HTML markup to include a Web Component at that point in the page.
Vue has built-in support for rendering custom elements and allows them to be used directly in Vue component templates.
Custom elements should not be confused with the ability to include Vue components as tags within another Vue component's template. Custom elements are used to create Web Components, not Vue components.
For more details see:
The term directive refers to template attributes beginning with the v- prefix, or their equivalent shorthands.
Built-in directives include v-if, v-for, v-bind, v-on and v-slot.
Vue also supports creating custom directives, though they are typically only used as an 'escape hatch' for manipulating DOM nodes directly. Custom directives generally can't be used to recreate the functionality of the built-in directives.
For more details see:
The term dynamic component is used to describe cases where the choice of which child component to render needs to be made dynamically. Typically, this is achieved using <component :is="type">.
A dynamic component is not a special type of component. Any component can be used as a dynamic component. It is the choice of component that is dynamic, rather than the component itself.
For more details see:
See reactive effect and side effect.
The use of events for communicating between different parts of a program is common to many different areas of programming. Within Vue, the term is commonly applied to both native HTML element events and Vue component events. The v-on directive is used in templates to listen