tessl/npm-vue-demi

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

—

Pending

Overview

Eval results

Files

Version Detection

Name: tessl/npm-vue-demi
Author: tessl

Runtime flags and utilities for detecting the current Vue version and accessing version-specific APIs. These utilities enable conditional logic based on the Vue version in use.

Capabilities

Vue Version Flags

Boolean flags that indicate which Vue version is currently active.

/**
 * Boolean flag indicating if running under Vue 2 environment
 * true for Vue 2.x (including 2.7), false for Vue 3.x
 */
declare const isVue2: boolean;

/**
 * Boolean flag indicating if running under Vue 3 environment  
 * true for Vue 3.x, false for Vue 2.x
 */
declare const isVue3: boolean;

Usage Examples:

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

// Conditional logic based on Vue version
if (isVue2) {
  // Vue 2 specific implementation
  console.log("Using Vue 2 features");
  // Access Vue 2 specific APIs
} else if (isVue3) {
  // Vue 3 specific implementation  
  console.log("Using Vue 3 features");
  // Access Vue 3 specific APIs
}

// Version-specific component setup
const setupComponent = () => {
  if (isVue2) {
    // Vue 2 component setup
    return {
      beforeDestroy() {
        // Vue 2 lifecycle
      }
    };
  } else {
    // Vue 3 component setup
    return {
      beforeUnmount() {
        // Vue 3 lifecycle
      }
    };
  }
};

Vue 2 Constructor Access

Reference to the Vue 2 constructor for accessing global Vue 2 APIs. This is undefined when running on Vue 3.

/**
 * Reference to Vue 2 constructor, undefined in Vue 3
 * Provides access to Vue 2's global API when available
 */
declare const Vue2: typeof Vue | undefined;

Usage Examples:

import { Vue2 } from "vue-demi";

// Safely access Vue 2 global configuration
if (Vue2) {
  // Configure Vue 2 instance
  Vue2.config.productionTip = false;
  Vue2.config.ignoredElements.push('custom-element');
  
  // Register global components
  Vue2.component('GlobalComponent', {
    template: '<div>Global Component</div>'
  });
  
  // Add global mixins
  Vue2.mixin({
    created() {
      console.log('Global mixin');
    }
  });
  
  // Access Vue 2 utilities
  Vue2.set(obj, key, value);
  Vue2.delete(obj, key);
}

Version String

The Vue version string is available when running on Vue 2 or Vue 2.7. This export is not available in Vue 3.

/**
 * Vue version string (available in Vue 2/2.7 implementations only)
 * Contains the semver version like "2.6.14" or "2.7.16"
 * Not exported in Vue 3 implementations
 */
declare const version: string;

Usage Examples:

import { version, isVue2 } from "vue-demi";

// version is only available in Vue 2/2.7
if (isVue2) {
  console.log(`Vue version: ${version}`);
  
  // Check for specific Vue 2 versions
  if (version.startsWith('2.7')) {
    // Vue 2.7 specific features
    console.log('Using Vue 2.7 with built-in Composition API');
  } else {
    // Vue 2.6 and below
    console.log('Using Vue 2.6 with @vue/composition-api plugin');
  }
} else {
  // Vue 3 - version export not available
  console.log('Using Vue 3');
}

Legacy Vue Export

Deprecated export that provides access to the Vue constructor. This is provided for backward compatibility but should be avoided in new code.

/**
 * @deprecated To avoid bringing in all the tree-shakable modules, 
 * this API has been deprecated. Use `Vue2` or named exports instead.
 * Refer to https://github.com/vueuse/vue-demi/issues/41
 */
declare const V: typeof Vue;

Migration Example:

// Old (deprecated)
import { V as Vue } from "vue-demi";
Vue.config.productionTip = false;

// New (recommended)
import { Vue2 } from "vue-demi";
if (Vue2) {
  Vue2.config.productionTip = false;
}

Injection Context Check

Utility function to check if injection context is available, useful for safely using provide/inject.

/**
 * Check if injection context exists
 * Falls back to getCurrentInstance() check
 * @returns boolean indicating if injection context is available
 */
declare function hasInjectionContext(): boolean;

Usage Examples:

import { hasInjectionContext, inject, provide } from "vue-demi";

// Safe injection usage
function useTheme() {
  if (hasInjectionContext()) {
    return inject('theme', 'light');
  }
  return 'light'; // fallback
}

// Conditional provide/inject
export default {
  setup() {
    if (hasInjectionContext()) {
      provide('theme', 'dark');
    }
    
    const theme = useTheme();
    return { theme };
  }
};

Install with Tessl CLI