tessl/npm-vue--composition-api

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Vue Composition API

Name: tessl/npm-vue--composition-api
Author: tessl

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