or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

configuration.mdconstructor-api.mdglobal-api.mdindex.mdmigration-helpers.md
tile.json

tessl/npm-vue--compat

Vue 3 compatibility build for Vue 2 that provides configurable Vue 2 compatible behavior to facilitate migration from Vue 2 to Vue 3

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/compat@3.5.x

To install, run

npx @tessl/cli install tessl/npm-vue--compat@3.5.0

index.mddocs/

Vue Compat

Vue Compat (@vue/compat) is a build of Vue 3 that provides configurable Vue 2 compatible behavior. It runs in Vue 2 mode by default with runtime warnings for deprecated features, enabling gradual migration from Vue 2 to Vue 3 while maintaining production stability during the transition process.

Package Information

  • Package Name: @vue/compat
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install @vue/compat

Core Imports

import Vue from "@vue/compat";

For compatibility configuration:

import Vue, { configureCompat } from "@vue/compat";

Runtime-only build (no template compiler):

import Vue from "@vue/compat/dist/vue.runtime.esm-bundler.js";

For migration utilities:

import { compatUtils, DeprecationTypes } from "vue";

CommonJS:

const Vue = require("@vue/compat");

Basic Usage

import Vue, { configureCompat } from "@vue/compat";

// Configure compatibility features globally
configureCompat({
  MODE: 2, // Vue 2 mode by default
  GLOBAL_MOUNT: false, // Disable specific warnings
});

// Create Vue 2-style instance
const app = new Vue({
  data() {
    return {
      message: "Hello from Vue Compat!",
    };
  },
  template: "<div>{{ message }}</div>",
});

// Mount to DOM
app.$mount("#app");

Architecture

Vue Compat is built around several key components:

  • CompatVue Constructor: Vue 2-style constructor with instance-based API
  • Configuration System: Fine-grained control over compatibility features through feature flags
  • Migration Warnings: Runtime warnings for deprecated Vue 2 patterns that need updating
  • Compatibility Utilities: Helper functions for checking and managing compatibility modes
  • Legacy API Support: Full support for Vue 2 APIs including global methods, instance methods, and lifecycle hooks

Capabilities

Vue 2-Style Constructor and Instance API

Complete Vue 2 constructor interface with instance methods, lifecycle hooks, and component options. Supports both legacy patterns and modern Vue 3 features.

declare const Vue: CompatVue;

interface CompatVue {
  new (options?: ComponentOptions): LegacyPublicInstance;
  version: string;
  config: AppConfig & LegacyConfig;
  nextTick: typeof nextTick;
  compile(template: string): RenderFunction;
  configureCompat(config: CompatConfig): void;
}

Constructor and Instance API

Global API Methods

Vue 2 global API methods including plugin system, component registration, directive registration, and deprecated utilities like Vue.extend, Vue.set, and Vue.delete.

interface CompatVue {
  use<Options extends unknown[]>(plugin: Plugin<Options>, ...options: Options): CompatVue;
  use<Options>(plugin: Plugin<Options>, options: Options): CompatVue;
  mixin(mixin: ComponentOptions): CompatVue;
  component(name: string): Component | undefined;
  component(name: string, component: Component): CompatVue;
  directive<T, V>(name: string): Directive<T, V> | undefined;
  directive<T, V>(name: string, directive: Directive<T, V>): CompatVue;
  extend(options?: ComponentOptions): CompatVue;
  set(target: any, key: PropertyKey, value: any): void;
  delete(target: any, key: PropertyKey): void;
  observable: typeof reactive;
  filter(name: string, arg?: any): null;
  
  // Internal properties
  cid: number;
  options: ComponentOptions;
  util: any;
  super: CompatVue;
}

Global API Methods

Compatibility Configuration

Fine-grained compatibility feature management with global and per-component configuration options. Control exactly which Vue 2 behaviors to maintain and which to migrate to Vue 3.

function configureCompat(config: CompatConfig): void;

type CompatConfig = Partial<Record<DeprecationTypes, boolean | 'suppress-warning'>> & {
  MODE?: 2 | 3 | ((comp: Component | null) => 2 | 3);
};

Compatibility Configuration

Migration Utilities

Helper functions and utilities for managing migration process, checking compatibility modes, and integrating with Vue 3 features during the transition.

declare const compatUtils: {
  warnDeprecation: (key: DeprecationTypes, instance, ...args) => void;
  isCompatEnabled: (key: DeprecationTypes, instance, enableForBuiltIn?) => boolean;
  checkCompatEnabled: (key: DeprecationTypes, instance) => boolean;
  softAssertCompatEnabled: (key: DeprecationTypes, instance) => boolean;
  createCompatVue: (createApp, wrappedCreateApp) => CompatVue;
};

Migration Utilities

Types

ComponentOptions

interface ComponentOptions {
  data?: () => Record<string, any>;
  props?: string[] | Record<string, any>;
  computed?: Record<string, any>;
  methods?: Record<string, Function>;
  watch?: Record<string, any>;
  created?(): void;
  mounted?(): void;
  updated?(): void;
  destroyed?(): void;
  beforeDestroy?(): void;
  template?: string;
  render?: Function;
  compatConfig?: CompatConfig;
}

Plugin

interface Plugin<Options = any> {
  install(app: CompatVue, ...options: Options[]): void;
}

LegacyConfig

interface LegacyConfig {
  silent?: boolean;
  devtools?: boolean;
  ignoredElements?: (string | RegExp)[];
  keyCodes?: Record<string, number | number[]>;
  productionTip?: boolean;
}