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 fromvue+@vue/composition-apiwith plugin auto installing.2.7: exports fromvue(Composition API is built-in in Vue 2.7).>=3.0: exports fromvue, with polyfill of Vue 2'ssetanddelAPI.
Install this as your plugin's dependency:
npm i vue-demi
# or
yarn add vue-demi
# or
pnpm i vue-demiAdd 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.
import { isVue2, isVue3 } from 'vue-demi'
if (isVue2) {
// Vue 2 only
} else {
// Vue 3 only
}To 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')
}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 3If 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 vue3Then 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-fixYou 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.
- VueUse - Collection of Composition API utils
- @vue/apollo-composable - Apollo GraphQL functions for Vue Composition API
- vuelidate - Simple, lightweight model-based validation
- vue-composition-test-utils - Simple vue composition api unit test utilities
- vue-use-stripe - Stripe Elements wrapper for Vue.js
- @opd/g2plot-vue - G2plot for vue
- vue-echarts - Vue.js component for Apache ECharts.
- fluent-vue - Vue.js integration for Fluent.js - JavaScript implementation of Project Fluent
- vue-datatable-url-sync - Synchronize datatable options and filters with the url to keep user preference even after refresh or navigation
- vue-insta-stories - Instagram stories in your vue projects.
- vue-tiny-validate - Tiny Vue Validate Composition
- v-perfect-signature - Pressure-sensitive signature drawing for Vue 2 and 3
- vue-winbox - A wrapper component for WinBox.js that adds the ability to mount Vue components.
- vue-word-highlighter - The word highlighter library for Vue 2 and Vue 3
- vue-chart-3 - Vue.js component for Chart.js
- json-editor-vue - JSON editor & viewer for Vue 2 and 3.
- kidar-echarts - A simpler echarts component for Vue 2 and 3.
- vue3-sketch-ruler - The zoom operation used for page presentation for Vue 2 and 3( Replace render function with template )
- vue-rough-notation - RoughNotation wrapper component for Vue 2 and 3.
- vue-request - Vue composition API for data fetching, supports SWR, polling, error retry, cache request, pagination, etc.
- vue3-lazyload - A vue3.x image lazyload plugin.
- vue-codemirror6 - CodeMirror6 component for Vue2 and 3.
- @tanstack/vue-query - TanStack Query for Vue.
open a PR to add your library ;)
See the blog post.
MIT License ยฉ 2020 Anthony Fu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent