How to reuse a global javascript file within a vue component

Question

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

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.

@ceejayoz but the object from the lang.min.js is not a state - its a reference object that gets its message loaded into a json file format. so its like carrying around a configured static array. — azngunit81
– azngunit81, Commented Jan 10, 2017 at 4:02

tony19 · Accepted Answer · 2022-07-15 22:17:34Z

3

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.

edited Jul 15, 2022 at 22:17

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 10, 2017 at 4:28

CodinCat

16k6 gold badges51 silver badges63 bronze badges

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

6 Comments

azngunit81 Over a year ago

wouldn't importing it in each components bloat out the vue?

CodinCat Over a year ago

No, the import in javascript will only import the module once

azngunit81 Over a year ago

so you saying that if I have 16 components and all of them import the same file javascript is actually importing once?

CodinCat Over a year ago

Yes, you can try it.

azngunit81 Over a year ago

I tried your solution the export works but I get the following when using within a component:

[Vue warn]: Error when evaluating expression "lang.get('main.specialties')": TypeError: Cannot read property 'get' of undefined (found in component: <toggle>)

|

Collectives™ on Stack Overflow

How to reuse a global javascript file within a vue component

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related