Repository files navigation

Vue Demi (half in French) is a developing utility
allows you to writeUniversal Vue Libraries for Vue 2 & 3
See more details inthis blog post

• <=2.6: exports fromvue +@vue/composition-api with 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'sset anddel API.

Install this as your plugin's dependency:

npm i vue-demi# oryarn add vue-demi# orpnpm i vue-demi

Addvue 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 tovue@2 +@vue/composition-api orvue@3 based on users' environments.

import{ref,reactive,defineComponent}from'vue-demi'

Publish your plugin and all is done!

When using withVite, you will need to opt-out the pre-bundling to getvue-demi work properly by

// vite.config.jsexportdefaultdefineConfig({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 aVue2 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, theinstall() API is exposed to as a safe version ofVue.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# ornpx vue-demi-switch 3

If you would like to importvue under an alias, you can use the following command

npx vue-demi-switch 2 vue2# ornpx vue-demi-switch 3 vue3

Thenvue-demi will redirect APIs from the alias name you specified, for example:

import*asVuefrom'vue3'varisVue2=falsevarisVue3=truevarVue2=undefinedexport*from'vue3'export{Vue,Vue2,isVue2,isVue3,}

If thepostinstall 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"  },}

Seeexamples.

• 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 forFluent.js - JavaScript implementation ofProject 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 ;)

Seethe blog post.

MIT License © 2020Anthony Fu