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'

See if this answers your question: https://stackoverflow.com/questions/63100658/add-global-variable-in-vue-js-3 — Pavan J, Mar 08 '22 at 11:02
the other question was also mine lol. This is not the same thing — Adri HM, Mar 08 '22 at 22:44

score 3 · Accepted Answer · answered Aug 24 '20 at 20:23

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

score 1 · Answer 2 · edited May 07 '22 at 17:15

1

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

edited May 07 '22 at 17:15

richardec

answered Mar 08 '22 at 10:39

Gephrey Chen

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Mar 08 '22 at 11:47

2 Answers2