JSPM – vue-demi@0.5.2

Package Exports

vue-demi

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-demi) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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

Usage

Install this as your plugin's dependency:

npm i vue-demi
# or
yarn add 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-beta.1",
    "vue": "^2.0.0 || >=3.0.0-rc.0"
  }
}

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!

Extra APIs

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

`isVue2` `isVue3`

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

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

`install()`

Composition API in Vue 2 is provided as a plugin and need to install to Vue instance before using. Normally, vue-demi will try to install it automatically. For some usages that you might need to ensure the plugin get installed correctly, the install() API is exposed to as a safe version of Vue.use(CompositionAPI). install() in Vue 3 environment will be an empty function (no-op).

import Vue from 'vue'
import { install } from 'vue-demi'

install(Vue)

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

export * from 'vue3'
export {
  Vue,
  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

Examples

See examples.

Who are using this?

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

open a PR to add your library ;)

Underhood

See the blog post.

vue-demi