# vuejs/composition-api **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vuejs-composition-api).** 4,184 stars · 340 forks · TypeScript · MIT ## Links - GitHub: https://github.com/vuejs/composition-api - Homepage: https://composition-api.vuejs.org/ - awesome-repositories: https://awesome-repositories.com/repository/vuejs-composition-api.md ## Description This project is a reactivity plugin that brings the Composition API and reactive state management from Vue 3 to Vue 2 applications. It serves as a component logic organizer and a system for encapsulating reactive state and functions into reusable utilities. The plugin enables the use of composable functions to share stateful logic across components without relying on mixins. It provides a structure based on plain variables and functions to facilitate automatic type inference and editor autocomplete. Additionally, it includes a provider-based dependency injection system for sharing data and functions across a component tree. The system covers the management of reactive state, computed properties, and watchers, alongside the ability to hook into component lifecycles. It allows for the integration of third-party stateful libraries into the native reactivity system and supports prefetching data on the server. The project is written in TypeScript. ## Tags ### User Interface & Experience - [Logic Organizers](https://awesome-repositories.com/f/user-interface-experience/node-based-ui-components/component-based-ui-integrations/component-based-rendering/vue-components/logic-organizers.md) — Provides a system to group related functions and state by logical concern within Vue 2 components. - [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/component-lifecycle-hooks.md) — Executes custom logic during component rendering, updates, or removal via lifecycle hooks. ([source](https://composition-api.vuejs.org/api/)) - [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Manages the creation, updates, and destruction of components throughout their operational lifecycle. ([source](https://composition-api.vuejs.org/guide/essentials/reactivity-fundamentals)) - [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-lifecycle-hooks.md) — Provides methods to execute specific logic at defined stages of a component's existence, such as mounting. ([source](https://composition-api.vuejs.org/api/sfc-script-setup)) - [Dependency Injection for UI](https://awesome-repositories.com/f/user-interface-experience/dependency-injection-for-ui.md) — Provides a provider-based mechanism for passing data and functions across a component tree without manual prop drilling. ### Web Development - [Vue Composition API Plugins](https://awesome-repositories.com/f/web-development/vue-composition-api-plugins.md) — Brings the Vue 3 Composition API and reactive state management capabilities to Vue 2 applications. - [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/application-lifecycle-hooks/lifecycle-hooks.md) — Implements mechanisms to execute custom logic during specific phases of a component's mounting and unmounting process. - [Component-Based State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management/component-based-state-management.md) — Manages component state and watchers using imported functions instead of static component options. ([source](https://composition-api.vuejs.org/api/composition-api-setup)) - [Proxy-Based Reactivity](https://awesome-repositories.com/f/web-development/proxy-based-reactivity.md) — Uses JavaScript Proxy objects to intercept data changes and automatically trigger UI updates. - [Reactive State Management](https://awesome-repositories.com/f/web-development/reactive-state-management.md) — Provides functions to create reactive variables and computed properties for tracking application state. ([source](https://composition-api.vuejs.org/guide/essentials/reactivity-fundamentals)) - [Bundle Size Optimizers](https://awesome-repositories.com/f/web-development/module-bundlers/bundle-size-optimizers.md) — Shrinks production output by compiling templates as inlined functions to remove instance proxies. ([source](https://composition-api.vuejs.org/guide/essentials/component-basics)) ### Software Engineering & Architecture - [Stateful Composables](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/stateful-composables.md) — Offers reusable functions that encapsulate reactive state and lifecycle hooks for efficient component composition. - [Compositional Logic Organizations](https://awesome-repositories.com/f/software-engineering-architecture/compositional-logic-organizations.md) — Groups related data and methods into functional blocks to improve code reuse and maintainability. ([source](https://cdn.jsdelivr.net/gh/vuejs/composition-api@main/README.md)) - [Dependency Injection Providers](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-providers.md) — Implements a provider-based dependency injection system to share data and functions across a component tree. ([source](https://composition-api.vuejs.org/guide/components/props)) - [Dependency Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection.md) — Implements a function-based dependency injection system to share data and functions across a component tree. ([source](https://composition-api.vuejs.org/)) - [Logic Reuse Patterns](https://awesome-repositories.com/f/software-engineering-architecture/logic-reuse-patterns.md) — Provides patterns for sharing stateful functionality across components using composable functions. ([source](https://composition-api.vuejs.org/about/community-guide)) - [Separation of Concerns](https://awesome-repositories.com/f/software-engineering-architecture/separation-of-concerns.md) — Implements a design pattern to decouple component logic from fixed option blocks, improving separation of concerns. ([source](https://composition-api.vuejs.org/)) - [Stateful Logic Encapsulation](https://awesome-repositories.com/f/software-engineering-architecture/stateful-logic-encapsulation.md) — Provides a system for extracting repetitive state management and business logic into standalone reusable composable functions. - [Component Option Translations](https://awesome-repositories.com/f/software-engineering-architecture/component-option-translations.md) — Converts traditional object-based component options into a single setup function for improved organization and type inference. - [Concern-Based Logic Grouping](https://awesome-repositories.com/f/software-engineering-architecture/concern-based-logic-grouping.md) — Organizes related code by functional purpose to reduce file navigation and simplify refactoring. ([source](https://composition-api.vuejs.org/guide/essentials/reactivity-fundamentals)) - [Instance Proxy Bypasses](https://awesome-repositories.com/f/software-engineering-architecture/instance-proxy-bypasses.md) — Enables more efficient minification and smaller production bundle sizes by accessing variables directly instead of through component instance proxies. - [Structural Typing and Inference](https://awesome-repositories.com/f/software-engineering-architecture/type-systems/structural-typing-and-inference.md) — Leverages plain variables and functions to enable native TypeScript structural typing and automatic inference for better autocomplete. ### Development Tools & Productivity - [Bundle Size Optimization](https://awesome-repositories.com/f/development-tools-productivity/bundle-size-optimization.md) — Reduces the final bundle size by removing instance proxies to allow for more efficient minification. ([source](https://composition-api.vuejs.org/about/community-guide)) ### Programming Languages & Runtimes - [Automatic Type Inferences](https://awesome-repositories.com/f/programming-languages-runtimes/automatic-type-inferences.md) — Leverages plain variables and functions to enable automatic determination of types for better editor autocomplete. ([source](https://composition-api.vuejs.org/)) - [Code Block Grouping](https://awesome-repositories.com/f/programming-languages-runtimes/code-block-grouping.md) — Clusters related variables and functions together in the source code to ensure cohesive execution and organization. ([source](https://composition-api.vuejs.org/api/sfc-script-setup)) - [Static Type Inference](https://awesome-repositories.com/f/programming-languages-runtimes/static-type-inference.md) — Provides a structure using plain variables and functions to enable native TypeScript static type inference. ([source](https://composition-api.vuejs.org/api/compile-time-flags)) - [Component Type Inferences](https://awesome-repositories.com/f/programming-languages-runtimes/static-type-inference/type-inference-support/component-type-inferences.md) — Enables automatic derivation and validation of types for component options and properties. ([source](https://cdn.jsdelivr.net/gh/vuejs/composition-api@main/README.md))