CtrlK
BlogDocsLog inGet started
Tessl Logo

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vue/compat@3.5.x
Publish Source
CLI
Badge
tessl/npm-vue--compat badge