Vue3 use global variable in js files

Question

I have some global variables in Vue3 project defined like:

 app.config.globalproperties.$locale = locale

then composable is created to dynamically return global variable:

import { getCurrentInstance ) from 'vue'
export function useGlobals(type) {
  const app = getCurrentInstance()
  const global = app.appContext.config.globalProperties[`$${type}`]
  return { global }
}

then in vue components composable is imported and executed:

import { useGlobals } from '../path'
const { global } = useGlobals('locale')

now, global variable can be used.

But the problem arise when I import composable in js files, there the appContext is undefined.

My question is, is there a way we can get global variable or appContext in js files?

Have you tried export const { appContext } = app in main.js? Should work. — tao
– tao, Commented Oct 1, 2022 at 13:29

Nikola Pavicevic · Accepted Answer · 2023-05-29 19:48:08Z

5

Thanks to great suggestion from @tao (btw it is impossible to get appContext from app but that gives me an idea :)) issue is solved.

I created another export in main.js, after app creation, with the all global properties:

const globals = app.config.globalProperties
export { globals }

or as a function (another @tao suggestion):

export const useGlobals = () => app.config.globalProperties

Now we can import globals in any js file and use it like:

import { globals } from '../path/to/main.js'
globals.$locale

or from function :

import { useGlobals } from '../path/to/main.js'
const { $locale } = useGlobals()

edited May 29, 2023 at 19:48

answered Oct 1, 2022 at 14:42

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tao Over a year ago

You're right. There's no appContext on app. Personally I'd use a function: export const useAppConfig = () => app.config. And use it as const { globalProperties } = useAppConfig(). This way you can be sure you get the contents of globalProperties when you call the function, not when the config was exported. In most use cases, globalProperties doesn't change after the app is mounted but if a plugin is added dynamically, you won't get any global props added by it, because the config was exported early. Makes sense?

Nikola Pavicevic Over a year ago

@tao Yes , yes it makes a lot of sense. Thanks again!! In my case global variables are created when app mounts, no additional ones. But exporting as function is way better. I will switch to it, cheers :)

qodeninja Over a year ago

interesting solution, so I'm assuming here that ../path is the path to your main.js file? If so can you update your info here to reflect that and eliminate confusion for people who dont have the full context? @NikolaPavicevic

Nelson · Accepted Answer · 2023-09-18 16:22:59Z

I attempted the answer suggested by @nikola-pavicevic, but it had a negative side effect of causing infinite recursion. For example, every time you import globals, it has to run through the entirety of main.js, which means initializing and mounting the app again. In production, the app appears to work correctly most of the time, but in my Jest unit tests, the recursion causes lots of issues.

To get around this, I created a GlobalVariableHolder.js file that only contains the following:

const GlobalVariables = {};
export default GlobalVariables;

Then, in main.js, I can import it like so:

import GlobalVariables from "./GlobalVariableHolder";

Then assign the variables:

// This line expects that you first assigned the variables to app.config.globalProperties.
GlobalVariables.variables = app.config.globalProperties;

Then, in the JS file where you need them, your import looks the same as before:

import GlobalVariables from "./GlobalVariableHolder";

And you have access to everything that was in app.config.globalProperties like this:

GlobalVariables.variables.$thisIsAMethod(parameter);

This way, importing GlobalVariableHolder doesn't spin up a new Vue instance every time.

Mossaab · Accepted Answer · 2022-10-01 13:27:24Z

0

instead of creating your composable to get global props, you can use the provide/inject mechanism.

check the documentation here: https://vuejs.org/api/composition-api-dependency-injection.html#provide

answered Oct 1, 2022 at 13:27

Mossaab

661 bronze badge

3 Comments

Nikola Pavicevic Over a year ago

hey mate, I'm aware of provide/inject functionality. But that only works in vue files not in js. Thanks any way for the help. cheers :)

tony19 Over a year ago

@NikolaPavicevic But your solution uses getCurrentInstance(), which also only works in the context of a Vue component instance (not any .js file).

Nikola Pavicevic Over a year ago

@tony19 hey mate, you are right, but I said in question that doesn't work in js files :) But solution thanks to tao comment, is not using getCurrentInstance(). In js files I don't need composable just newly exported variable.

Collectives™ on Stack Overflow

Vue3 use global variable in js files

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related