vue-demi

import { ref, computed, isVue2, isVue3, version as vueVersion, getCurrentInstance } from 'vue-demi'; /** * A universal composable that provides a reactive counter. * Works across Vue 2 (with Composition API) and Vue 3. */ export function useUniversalCounter(initialValue: number = 0) { const count = ref(initialValue); const double = computed(() => count.value * 2); const increment = () => { count.value++; }; // Demonstrate version-specific logic if (isVue2) { console.log(`[Vue Demi] Running in Vue 2 (version: ${vueVersion}).`); // Example of accessing Vue 2 instance if needed (caution: not always universal) const vm = getCurrentInstance()?.proxy; if (vm) { console.log('Vue 2 VM detected:', vm.$options.name); } } else if (isVue3) { console.log(`[Vue Demi] Running in Vue 3 (version: ${vueVersion}).`); // Example of accessing Vue 3 instance (different structure) const instance = getCurrentInstance(); if (instance) { console.log('Vue 3 instance detected:', instance.type.name); } } return { count, double, increment, isVue2, isVue3, vueVersion }; } // To test in a Vue 3 environment: // npm install vue@3 vue-demi // npx vue-demi-switch 3 // Then integrate `useUniversalCounter` into a Vue 3 component. // To test in a Vue 2 environment (requires Composition API plugin): // npm install vue@2 @vue/composition-api vue-demi // npx vue-demi-switch 2 // Make sure @vue/composition-api is installed for Vue 2.6.x. // Then integrate `useUniversalCounter` into a Vue 2 component.