Vue 3: global import for ref, reactive and computed

Question

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'

user_6277151 · Answer

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

user_18407436 · Answer

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