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

.js

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

import SearchToggle from './ponents/toggle.vue'
import Lang from './lang.min.js'
...
Vueponent('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 ponent in the following directory which was imported as shown above: ressource/assets/js/ponents/toggle.vue

in the script section:

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

            }
        },
  ...
}

However this doesn't work. It plains 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 ponent (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.

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

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

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

import SearchToggle from './ponents/toggle.vue'
import Lang from './lang.min.js'
...
Vue.ponent('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 ponent in the following directory which was imported as shown above: ressource/assets/js/ponents/toggle.vue

in the script section:

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

            }
        },
  ...
}

However this doesn't work. It plains 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 ponent (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.

• javascript
• vue.js
• vue-ponent

• vuejs/v2/guide/state-management.html – ceejayoz Commented Jan 10, 2017 at 3:58
• @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 Commented Jan 10, 2017 at 4:02

1 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 ponents

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 ponents.