or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcomponent-utilities.mdcomputed.mddependency-injection.mdindex.mdlifecycle.mdreactive-state.mdtypes.mdwatchers.md
tile.json

tessl/npm-vue--composition-api

Provides Vue 3 Composition API compatibility for Vue 2 applications with reactive state management and lifecycle hooks.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/composition-api@1.7.x

To install, run

npx @tessl/cli install tessl/npm-vue--composition-api@1.7.0

index.mddocs/

Vue Composition API

Vue Composition API provides Vue 3's modern composition-based component logic to Vue 2 applications. It enables reactive state management, lifecycle hooks, computed properties, watchers, and dependency injection using a function-based API instead of the traditional options-based approach. This compatibility layer allows developers to adopt Vue 3 patterns while maintaining Vue 2 compatibility.

Package Information

  • Package Name: @vue/composition-api
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @vue/composition-api

Core Imports

import VueCompositionAPI from "@vue/composition-api";
import { ref, reactive, computed, watch, onMounted } from "@vue/composition-api";

For CommonJS:

const VueCompositionAPI = require("@vue/composition-api");
const { ref, reactive, computed, watch, onMounted } = require("@vue/composition-api");

Basic Usage

import Vue from "vue";
import VueCompositionAPI, { ref, reactive, computed, watch, onMounted } from "@vue/composition-api";

// Install the plugin
Vue.use(VueCompositionAPI);

// Use in component
export default {
  setup() {
    // Reactive state
    const count = ref(0);
    const user = reactive({ name: "Alice", age: 25 });

    // Computed property
    const doubleCount = computed(() => count.value * 2);

    // Watcher
    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    // Lifecycle hook
    onMounted(() => {
      console.log("Component mounted");
    });

    // Methods
    const increment = () => {
      count.value++;
    };

    return {
      count,
      user,
      doubleCount,
      increment,
    };
  },
};

Architecture

Vue Composition API is structured around several key systems:

  • Installation Plugin: Vue.use() plugin that patches Vue 2 with composition API support
  • Reactivity System: Reactive proxies, refs, and computed values with dependency tracking
  • Lifecycle Hooks: Function-based alternatives to component lifecycle options
  • Watch System: Advanced watching capabilities for reactive data sources
  • Dependency Injection: Provide/inject pattern for component communication
  • Effect Scopes: Advanced effect management and cleanup organization

Capabilities

Plugin Installation

Main Vue plugin that enables Composition API support in Vue 2 applications.

interface VueCompositionAPIPlugin {
  install(Vue: VueConstructor): void;
}

declare const Plugin: VueCompositionAPIPlugin;
export default Plugin;

function install(Vue: VueConstructor): void;

Reactive State Management

Core reactivity system providing reactive objects, refs, and readonly proxies with automatic dependency tracking.

function reactive<T extends object>(obj: T): UnwrapRef<T>;
function ref<T>(value: T): Ref<UnwrapRef<T>>;
function readonly<T extends object>(obj: T): DeepReadonly<UnwrapNestedRefs<T>>;

interface Ref<T = any> {
  value: T;
}

Reactive State

Computed Properties

Derived reactive state that automatically updates when dependencies change, with support for both read-only and writable computed properties.

function computed<T>(getter: () => T): ComputedRef<T>;
function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>;

interface ComputedRef<T = any> extends WritableComputedRef<T> {
  readonly value: T;
}

interface WritableComputedOptions<T> {
  get: () => T;
  set: (value: T) => void;
}

Computed Properties

Watchers and Effects

Advanced watching system for tracking reactive data changes with configurable timing and cleanup.

function watch<T>(
  source: WatchSource<T>,
  callback: WatchCallback<T>,
  options?: WatchOptions
): WatchStopHandle;

function watchEffect(effect: WatchEffect): WatchStopHandle;

type WatchSource<T> = Ref<T> | ComputedRef<T> | (() => T);
type WatchCallback<T> = (value: T, oldValue: T) => void;
type WatchStopHandle = () => void;

Watchers and Effects

Lifecycle Hooks

Function-based lifecycle hooks that integrate with Vue 2's component lifecycle system.

function onBeforeMount(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onMounted(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onBeforeUpdate(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onUpdated(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onBeforeUnmount(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onUnmounted(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onErrorCaptured(hook: (error: Error, instance: ComponentInstance, info: string) => boolean | void, target?: ComponentInternalInstance): Function | undefined;
function onActivated(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onDeactivated(hook: () => void, target?: ComponentInternalInstance): Function | undefined;
function onServerPrefetch(hook: () => Promise<any> | void, target?: ComponentInternalInstance): Function | undefined;

Lifecycle Hooks

Dependency Injection

Provide/inject system for passing data down the component tree without explicit prop drilling.

function provide<T>(key: InjectionKey<T> | string, value: T): void;
function inject<T>(key: InjectionKey<T> | string): T | undefined;
function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T;

interface InjectionKey<T> extends Symbol {}

Dependency Injection

Component Utilities

Utilities for component definition, setup context access, and Vue 3 compatibility features.

function defineComponent<Props, RawBindings = object>(
  setup: SetupFunction<Props, RawBindings>
): ComponentOptions<Vue>;

function getCurrentInstance(): ComponentInternalInstance | null;
function nextTick(callback?: () => void): Promise<void>;

interface SetupContext {
  attrs: Record<string, any>;
  slots: Slots;
  emit: (event: string, ...args: any[]) => void;
}

Component Utilities

Advanced Features

Effect scopes, CSS modules, app instances, and other advanced composition features.

function effectScope(detached?: boolean): EffectScope;
function getCurrentScope(): EffectScope | undefined;
function createApp(rootComponent: any, rootProps?: any): App;
function useCssModule(name?: string): Record<string, string>;

Advanced Features

Utilities

Development and debugging utilities for Vue composition functions.

function warn(message: string): void;
function nextTick(callback?: () => void): Promise<void>;

Types and Interfaces

Core type definitions used throughout the composition API.

type UnwrapRef<T> = T extends Ref<infer V>
  ? UnwrapRefSimple<V>
  : UnwrapRefSimple<T>;

type ToRefs<T = any> = { [K in keyof T]: Ref<T[K]> };

interface ComponentInternalInstance {
  proxy: ComponentInstance | null;
  setupState: Record<string, any>;
}

type SetupFunction<Props, RawBindings> = (
  props: Readonly<Props>,
  ctx: SetupContext
) => RawBindings | (() => VNode | null) | void;

Types and Interfaces