vue-demi
Advanced tools
Package description
The vue-demi package is a utility that enables library authors to publish their libraries for both Vue 2 and Vue 3 with a single codebase. It provides a set of APIs that are compatible with both versions of Vue, allowing for seamless integration and use in projects that may be using either version.
Unified Vue Hooks
vue-demi provides a way to detect the version of Vue being used and allows you to conditionally execute code based on the version. This is useful for handling differences in the Vue lifecycle hooks or other version-specific features.
import { isVue2, isVue3, Vue2, Vue3 } from 'vue-demi'
if (isVue2) {
// Vue 2 specific logic
} else if (isVue3) {
// Vue 3 specific logic
}Reactive API
vue-demi exports the reactive composition API that is consistent across Vue 2 and Vue 3. This allows developers to use the reactive system without worrying about the underlying Vue version.
import { ref, reactive } from 'vue-demi'
const count = ref(0)
const state = reactive({ name: 'Vue' })Effect API
vue-demi provides the effect function which is part of the reactivity system in Vue 3 and is made available for Vue 2 through this package. It allows you to run side effects when reactive data changes.
import { effect } from 'vue-demi'
effect(() => {
console.log('This will run when reactive state changes')
})This package is a plugin for Vue 2 that provides the Vue 3 Composition API. It is similar to vue-demi in that it allows developers to use Vue 3 features in Vue 2 applications, but it does not provide the same automatic compatibility layer for libraries to support both Vue 2 and Vue 3.
vue2-helpers is a set of helper functions for Vue 2 that aim to bring some of the Vue 3 functionality to Vue 2. While it provides similar bridging functionality, it is not as comprehensive as vue-demi and is more focused on specific helpers rather than a full compatibility layer.
Readme
Vue Demi (half in French) is a developing utility
allows you to write Universal Vue Libraries for Vue 2 & 3
See more details in this blog post
<=2.6: exports from vue + @vue/composition-api with plugin auto installing.2.7: exports from vue (Composition API is built-in in Vue 2.7).>=3.0: exports from vue, with polyfill of Vue 2's set and del API.Install this as your plugin's dependency:
npm i vue-demi
# or
yarn add vue-demi
# or
pnpm i vue-demi
Add vue and @vue/composition-api to your plugin's peer dependencies to specify what versions you support.
{
"dependencies": {
"vue-demi": "latest"
},
"peerDependencies": {
"@vue/composition-api": "^1.0.0-rc.1",
"vue": "^2.0.0 || >=3.0.0"
},
"peerDependenciesMeta": {
"@vue/composition-api": {
"optional": true
}
},
"devDependencies": {
"vue": "^3.0.0" // or "^2.6.0" base on your preferred working environment
},
}
Import everything related to Vue from it, it will redirect to vue@2 + @vue/composition-api or vue@3 based on users' environments.
import { ref, reactive, defineComponent } from 'vue-demi'
Publish your plugin and all is done!
When using with Vite, you will need to opt-out the pre-bundling to get
vue-demiwork properly by// vite.config.js export default defineConfig({ optimizeDeps: { exclude: ['vue-demi'] } })
Vue Demi provides extra APIs to help distinguish users' environments and to do some version-specific logic.
isVue2 isVue3import { isVue2, isVue3 } from 'vue-demi'
if (isVue2) {
// Vue 2 only
} else {
// Vue 3 only
}
Vue2To avoid bringing in all the tree-shakable modules, we provide a Vue2 export to support access to Vue 2's global API. (See #41.)
import { Vue2 } from 'vue-demi'
if (Vue2) {
Vue2.config.ignoredElements.push('x-foo')
}
install()Composition API in Vue 2 is provided as a plugin and needs to be installed on the Vue instance before using. Normally, vue-demi will try to install it automatically. For some usages where you might need to ensure the plugin gets installed correctly, the install() API is exposed to as a safe version of Vue.use(CompositionAPI). install() in the Vue 3 environment will be an empty function (no-op).
import { install } from 'vue-demi'
install()
To explicitly switch the redirecting version, you can use these commands in your project's root.
npx vue-demi-switch 2
# or
npx vue-demi-switch 3
If you would like to import vue under an alias, you can use the following command
npx vue-demi-switch 2 vue2
# or
npx vue-demi-switch 3 vue3
Then vue-demi will redirect APIs from the alias name you specified, for example:
import * as Vue from 'vue3'
var isVue2 = false
var isVue3 = true
var Vue2 = undefined
export * from 'vue3'
export {
Vue,
Vue2,
isVue2,
isVue3,
}
If the postinstall hook doesn't get triggered or you have updated the Vue version, try to run the following command to resolve the redirecting.
npx vue-demi-fix
You can support testing for both versions by adding npm alias in your dev dependencies. For example:
{
"scripts": {
"test:2": "vue-demi-switch 2 vue2 && jest",
"test:3": "vue-demi-switch 3 && jest",
},
"devDependencies": {
"vue": "^3.0.0",
"vue2": "npm:vue@2"
},
}
or
{
"scripts": {
"test:2": "vue-demi-switch 2 && jest",
"test:3": "vue-demi-switch 3 vue3 && jest",
},
"devDependencies": {
"vue": "^2.6.0",
"vue3": "npm:vue@3"
},
}
See examples.
open a PR to add your library ;)
See the blog post.
MIT License © 2020 Anthony Fu
FAQs
Unknown package
The npm package vue-demi receives a total of 3,438,113 weekly downloads. As such, vue-demi popularity was classified as popular.
We found that vue-demi demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.