or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-tools.mdcomposition-api.mdindex.mdreactive-utilities.mdversion-detection.md
tile.json

tessl/npm-vue-demi

Vue Demi is a developing utility that allows you to write Universal Vue Libraries for Vue 2 & 3

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/vue-demi@0.14.x

To install, run

npx @tessl/cli install tessl/npm-vue-demi@0.14.0

index.mddocs/

Vue Demi

Vue Demi (half in French) is a developing utility that allows you to write Universal Vue Libraries that work seamlessly across both Vue 2 and Vue 3 ecosystems. It provides intelligent version detection and API redirection, automatically exporting appropriate APIs from either vue@2 + @vue/composition-api or vue@3 based on the user's environment.

Package Information

  • Package Name: vue-demi
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install vue-demi
  • Peer Dependencies: vue (^2.6.0 || ^3.0.0), @vue/composition-api (^1.0.0-rc.1, optional)

Core Imports

import { ref, reactive, defineComponent, isVue2, isVue3 } from "vue-demi";

For CommonJS:

const { ref, reactive, defineComponent, isVue2, isVue3 } = require("vue-demi");

Basic Usage

import { ref, reactive, isVue2, isVue3, Vue2, install } from "vue-demi";

// Version detection
if (isVue2) {
  // Vue 2 specific logic
  console.log("Running on Vue 2");
} else {
  // Vue 3 specific logic  
  console.log("Running on Vue 3");
}

// Use Composition API
const count = ref(0);
const state = reactive({ name: "Vue Demi" });

// Access Vue 2 constructor if available
if (Vue2) {
  Vue2.config.productionTip = false;
}

// Ensure Composition API is installed (safe no-op in Vue 3)
install();

Architecture

Vue Demi acts as an intelligent compatibility layer that:

  • Version Detection: Automatically detects Vue version at runtime and build time
  • API Redirection: Routes API calls to the appropriate Vue version implementation
  • Universal Export: Re-exports all Vue APIs with compatibility shims where needed
  • Build-time Switching: Uses postinstall hooks to copy version-specific implementations
  • Development Tools: Provides CLI tools for manual version switching and testing

The library maintains three separate implementations (Vue 2, Vue 2.7, Vue 3) and automatically selects the correct one based on the detected Vue version.

Capabilities

Version Detection

Runtime flags and utilities for detecting the current Vue version and accessing version-specific APIs.

declare const isVue2: boolean;
declare const isVue3: boolean;
declare const Vue2: typeof Vue | undefined; // any in Vue 3
declare const version: string; // Vue version string (Vue 2/2.7 only)

Version Detection

Composition API Compatibility

Universal access to Composition API functions that work across Vue 2 (with @vue/composition-api) and Vue 3.

declare function install(vue?: any): void; // Vue 2: (vue?: typeof Vue), Vue 3: () => void
declare function hasInjectionContext(): boolean;

All Vue Composition API functions are re-exported: ref, reactive, computed, watchEffect, onMounted, etc.

Composition API

Reactive Utilities

Vue 2 style reactive utilities with Vue 3 compatibility polyfills for universal reactive data manipulation.

export function set<T>(target: any, key: any, val: T): T;
export function del(target: any, key: any): void;

Reactive Utilities

CLI Tools

Command-line utilities for manual version switching and compatibility testing during development.

npx vue-demi-switch 2
npx vue-demi-switch 2.7
npx vue-demi-switch 3
npx vue-demi-fix

CLI Tools

Types

// Deprecated export for backward compatibility
declare const V: typeof Vue;

// Vue 2 specific Plugin type
type Plugin = PluginObject<any> | PluginFunction<any>;

// Vue 3 development feature not available in Vue 2
type DebuggerEvent = never;

// Vue 3 Mock Components (throw errors in Vue 2)
declare const Fragment: Component;
declare const Transition: Component;
declare const TransitionGroup: Component;
declare const Teleport: Component;
declare const Suspense: Component;
declare const KeepAlive: Component;

// Vue 2.7 specific functions
declare function warn(msg: string, vm?: Component | null): void; // Vue 2.7 only
declare function createApp(rootComponent: any, rootProps?: any): App; // Vue 2.7 only

// Vue 2.7 App interface for createApp polyfill
interface App<T = any> {
  config: VueConstructor['config'];
  use: VueConstructor['use'];
  mixin: VueConstructor['mixin'];
  component: VueConstructor['component'];
  directive(name: string): Directive | undefined;
  directive(name: string, directive: Directive): this;
  provide<T>(key: InjectionKey<T> | string, value: T): this;
  mount: Vue['$mount'];
  unmount: Vue['$destroy'];
}