Make custom js file globally accessible in NUXT app-CodePudding

NOTE: I'm stuck using Vue 2 and Nuxt 2.15.8 for the foreseeable future.

I'm not sure what name is given to this type of JS file, I know there is one, but here goes.

Say I have a 'configuration' file called thingMap.js with the following schema;

export default {
    THING1: {
        name: "Thing 1",
        key: "thing1",
        icon: "thing1-icon",
        ...
    },
    THING2: {
        name: "Thing 2",
        key: "thing2",
        icon: "thing2-icon",
        ...
    },
    THING3: {
        name: "Thing 3",
        key: "thing3",
        icon: "thing3-icon",
        ...
    }
}

and I register this in a component like so;

import ThingMap from "~/lib/map/thing-map";

and I use it like so;

const icon = ThingMap["THING1"].icon;

How can I make this accessible throughout my app without having to import it in every component. I've looked though the Nuxt docs etc. but the examples don't seem to line up with my file's code, or they're too contrived for me to work out how I alter them for my use case.

I fully expect the implementation(s) suggested to be a "oohhh like that! that makes so much sense" moment because right now my brains failing me HAHA

CodePudding user response：

You're using it in some kind of enums apparently.
You could put it inside of Vuex and then, you'll get a global access to it.

Check the Nuxt documentation Vuex one for more details.

Pinia is also a viable use and works great with Vue2 (hence Nuxt2) well too.