Options: Composition | Vue.js

Reactivity: Utilities
Reactivity: Advanced
Dependency Injection
Options: Composition
Syntax Specification
Server-Side Rendering
TypeScript Utility Types
Provide values that can be injected by descendant components.
provide and inject are used together to allow an ancestor component to serve as a dependency injector for all its descendants, regardless of how deep the component hierarchy is, as long as they are in the same parent chain.
The provide option should be either an object or a function that returns an object. This object contains the properties that are available for injection into its descendants. You can use Symbols as keys in this object.
Using a function to provide per-component state:
Note in the above example, the provided msg will NOT be reactive. See Working with Reactivity for more details.
See also Provide / Inject
Declare properties to inject into the current component by locating them from ancestor providers.
The inject option should be either:
An injected property will be undefined if neither a matching property nor a default value was provided.
Note that injected bindings are NOT reactive. This is intentional. However, if the injected value is a reactive object, properties on that object do remain reactive. See Working with Reactivity for more details.
Using an injected value as the default for a prop:
Using an injected value as data entry:
Injections can be optional with default value:
If it needs to be injected from a property with a different name, use from to denote the source property:
Similar to prop defaults, you need to use a factory function for non-primitive values:
See also Provide / Inject
An array of option objects to be mixed into the current component.
The mixins option accepts an array of mixin objects. These mixin objects can contain instance options like normal instance objects, and they will be merged against the eventual options using the certain option merging logic. For example, if your mixin contains a created hook and the component itself also has one, both functions will be called.
Mixin hooks are called in the order they are provided, and called before the component's own hooks.
No Longer Recommended
In Vue 2, mixins were the primary mechanism for creating reusable chunks of component logic. While mixins continue to be supported in Vue 3, Composable functions using Composition API is now the preferred approach for code reuse between components.
A "base class" component to extend from.
Allows one component to extend another, inheriting its component options.
From an implementation perspective, extends is almost identical to mixins. The component specified by extends will be treated as though it were the first mixin.
However, extends and mixins express different intents. The mixins option is primarily used to compose chunks of functionality, whereas extends is primarily concerned with inheritance.
As with mixins, any options (except for setup()) will be merged using the relevant merge strategy.
Not Recommended for Composition API
extends is designed for Options API and does not handle the merging of the setup() hook.
In Composition API, the preferred mental model for logic reuse is "compose" over "inheritance". If you have logic from a component that needs to be reused in another one, consider extracting the relevant logic into a Composable.
If you still intend to "extend" a component using Composition API, you can call the base component's setup() in the extending component's setup():
Edit this page on GitHub