wiki.techinc.nl

Thijs/wiki.techinc.nl

History

Sportzpikachu 74fd0d86a4 pinia: add vue-demi module to fix dev mode HMR Add vue-demi as a ResourceLoader foreign resource. `dc17d0e1e4` added the pinia module to core, loading Vue in place of vue-demi. This worked because pinia only uses vue-demi functions behind `isVue2` checks (which do not actually exist on the Vue object but just evaluate to falsy), except for when using hot module replacement in the development mode of pinia. Another way to fix pinia calling missing vue-demi functions is by adding vue-demi as a RL module and adding it as a dependency of pinia, but this would cause an extra HTTP request for a 560 byte file even in production, where it is not used. Bug: T364518 Change-Id: Ib27ac4550e4348c399dfc7e547982c1bf416a1b7		2024-05-10 08:59:33 +01:00
..
index.cjs
LICENSE
README.md

README.md

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`

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

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