0.14.7 • Published 4 months ago

vue-demi v0.14.7

Weekly downloads
33,622
License
MIT
Repository
github
Last release
4 months ago

Strategies

  • <=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.

Usage

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-demi work properly by

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['vue-demi']
 }
})

Extra APIs

Vue Demi provides extra APIs to help distinguish users' environments and to do some version-specific logic.

isVue2 isVue3

import { isVue2, isVue3 } from 'vue-demi'

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

Vue2

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')
}

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()

CLI

Manually Switch Versions

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

Package Aliasing

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,
}

Auto Fix

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

Isomorphic Testings

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

Examples

See examples.

Who is using this?

Underhood

See the blog post.

License

MIT License © 2020 Anthony Fu

@bluryar/composables-naive-ui@jiqi/vue-helpers@synaps-io-pre-prod/vue3-verifydesign-system-vitedaniluk4000-vue-yandex-mapscomposition-store@dewfall/vhooksgolem-uivue-digit-wheelcoilixvue-share-poppervue-media-breakpointsv-zustandvue-winbox-testpinia-state-syncluckysheet-componentluckysheet-components2luckysheet-components3pinia-dx@linxl/input-tagsvue-cube-table@netzoio/widgets@datrinh/lib-testtj-virtualized-tree@ued_fpi/element-prototypes@ued_fpi/element-settings-formislandzg-test-npmming-tao-playerpompauteds-virtual-tree-testtj-virtual-components-v2wt-image-toolsdlsite-sp-common-parts@colza/page-layouthowvesplatformindex@hueco/page-layout@oesubunit/oe-admin-layoutsvue-map-coord-pickupvue-plat-homeyl-baseuivue3-plat-formvue3-plat-index@gpdi_ds_platform/pluginzhdd-mapsvue-file-previewerol-vue-nextinsig-ui-utils@vuexpert/vue-components@vri/config-viteab-tests-plugin@nutsv/ui@th-formily/reactive-vue@th-formily/vue@unonu/uno-admin-layout@coveyz/admin-box@soybeanjs/vue-admin-layout@soybeanjs/vue-admin-tabsoybean-admin-layoutsoybean-admin-tabv-code-diff-customfront-public-componentfront-pulic-componentratexfuni-oopspotato-map3d-ui@everything-registry/sub-chunk-3078usesafeurl@zhu-hong/code-blockyr-echartsxlcdn-files@ucstu/vue3-pixi-nuxtcustom-testui-aa@subwallet_connect/vuewenplusgopagegreenbow-design-systemgo-viewgpic-designkuke-demikr-ui-tempkqbijy-smart-platformjy-vue-usekidar-reactkidar-vuelogistics-layoutlogistics-tabloading-augus1live-template-creatorlive-creatorkk-componentskeystar-uikd-graphkapix-components-vue3kapix-graphqlk-hooksjx-formjwy-componentskikimore
0.14.7

4 months ago

0.14.6

9 months ago

0.14.5

1 year ago

0.14.0

1 year ago

0.14.1

1 year ago

0.14.2

1 year ago

0.14.3

1 year ago

0.14.4

1 year ago

0.13.11

2 years ago

0.13.10

2 years ago

0.13.6

2 years ago

0.13.7

2 years ago

0.13.8

2 years ago

0.13.9

2 years ago

0.13.0

2 years ago

0.13.1

2 years ago

0.13.2

2 years ago

0.13.3

2 years ago

0.13.4

2 years ago

0.13.5

2 years ago

0.12.2

2 years ago

0.12.3

2 years ago

0.12.4

2 years ago

0.12.5

2 years ago

0.12.0

3 years ago

0.12.1

3 years ago

0.11.4

3 years ago

0.11.3

3 years ago

0.11.0

3 years ago

0.11.1

3 years ago

0.11.2

3 years ago

0.11.0-beta.1

3 years ago

0.10.1

3 years ago

0.10.0

3 years ago

0.9.1

3 years ago

0.9.0

3 years ago

0.7.5

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.7.4

3 years ago

0.7.3

3 years ago

0.7.2

3 years ago

0.7.1

3 years ago

0.6.2

3 years ago

0.7.0

3 years ago

0.6.1

3 years ago

0.6.0-alpha.1

3 years ago

0.6.0

3 years ago

0.5.4

3 years ago

0.5.3

3 years ago

0.5.2

3 years ago

0.5.1

3 years ago

0.5.0

3 years ago

0.4.5

4 years ago

0.4.4

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.3

4 years ago

0.3.2

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.0-alpha.2

4 years ago

0.2.0

4 years ago

0.2.0-alpha.1

4 years ago

0.1.11

4 years ago

0.1.10

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.5

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago