sql/node_modules/vue-demi

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

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`

ts 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](https://github.com/vueuse/vue-demi/issues/41).)

ts 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).

ts 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.

bash 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 

bash 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:

ts 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.

bash npx vue-demi-fix

### Isomorphic Testings

You can support testing for both versions by adding npm alias in your dev dependencies. For example:

json { "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

json { "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?

• 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. > open a PR to add your library ;)

Underhood

See the blog post.

License

MIT License © 2020 Anthony Fu