How to reuse a global javascript file within a vue component

Question

I have a Lang object created from lang.min.js from:

https://github.com/rmariuzzo/Lang.js

in my Laravel app I have the following in app.js:

import SearchToggle from './components/toggle.vue'
import Lang from './lang.min.js'
...
Vue.component('toggle', Toggle);
...
var lang = new Lang();
lang.setMessages(require('./messages.js'));
console.log(lang.getLocale());
console.log(lang.get('main.specialties'));
...

the lang objects has no errors and manage to output the get as intended.

Now I have a vue component in the following directory which was imported as shown above: ressource/assets/js/components/toggle.vue

in the script section:

<script>
export default{
        data(){
            return {
                text_holder: lang.get('main.specialties'),

            }
        },
  ...
}

However this doesn't work. It complains that the lang is undefined. I think I'm missing the gap (concept) of javascript scope. I thought that if everything is in the app.js and got imported then the var lang would have been int he global scope and I would be allowed to use it anywhere across the the import (similar to how vendor is from php) I guess not.

Now what do I do? pull in an import on each vue component (but then I have to ensure the path going backward is correct and also multi loading the same object / message.js will bloat the javascript.

Would appreciate the JS help.

Answer 1

Create your lang.js, and export the lang instance

var lang = new Lang();
lang.setMessages(require('./messages.js'));
...
export default lang;

then you can import and use that instance in your components

import lang from 'path/to/lang'

export default {
  data () {
    return {
      text_holder: lang.get('main.specialties'),
      ...
    }
  }
}

another way is to write plugins, you can inject lang to Vue, so you are able to access lang in your components.