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

3

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

answered Aug 24 '20 at 20:23

tony19

I think this is a really bad idea and (as @tony19 himself says) it shouldn't be encouraged. It makes the functions global to the browser, but in Vue3, "global" doesn't mean "global-to-the-browser"; it means global to the Vue Application. `ref`, `computed`, etc. should be appended to the Application object, not the window object, and it would still be accessible at the top-level in your Vue Components. To any junior Devs coming across this thread, don't start doing this! Other answers and comments on this thread point to more elegant solutions. – cartbeforehorse Jan 06 '23 at 17:04

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

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