'Vue 3: global import for ref, reactive and computed

How do I import globally with Vue 3 in the main.js the ref, reactive and computed?

I'm trying to avoid doing this in each component:

import { ref, reactive, computed } from 'vue'

javascript vue.js vuejs3

Solution 1:^[1]

Not sure this is a good idea (it likely defeats tree shaking), but it's possible to make them global by adding them to window:

// main.js
import { ref, reactive, computed } from 'vue'

window.ref = ref
window.reactive = reactive
window.computed = computed

If using ESLint, make sure to configure these globals:

// eslintrc.js
module.exports = {
  globals: {
    ref: true,
    reactive: true,
    computed: true,
  }
}

npm i vue-global-api
// main.js
import 'vue-global-api'

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source
Solution 1	tony19
Solution 2	richardec