Using 'Lang' class with Vue.js

[adl1995]

It so happens that I can't import the 'Lang' class in my Vue component; I receive a ReferenceError. Any help would be appreciated.

[rmariuzzo]

This is related to how the template is defined. I think this is related to another existing issue. I will check it later, since I'm in the hospital right now.

[rmariuzzo]

This one will be deal with #63

[michgeek]

My solution to that problem is to use the command without including Lang.js, imo easier than #63

1. Assuming my output is : /resources/assets/js/messages.js

// Generate the messages without the lib
php artisan lang:js --no-lib

// Install `Lang.js` as a standalone package
npm install lang.js
// or
yarn add lang.js

2. Create a file in /resources/assets/js/lang.js

// Inside my /resources/assets/js/lang.js
import lang from 'lang.js';
import messages from 'js/messages';

const Lang = new lang({
    messages
});

export default Lang;

3. Now you can use Lang wherever you need

import Lang from `js/lang`; // ES6, with webpack configured to resolve `js => /resources/assets/js`
var Lang = require('path/to/your/lang.js'); // Alternatively

Lang.get('my.translation');
// ...

[josiasmontag]

Even simpler solution:

Add this filter to Vue:

Vue.filter('trans', (...args) => {
    return Lang.get(...args);
});

Then you can do stuff like this:

{{ 'messages.home' | trans }}

or:

{{ 'messages.welcome' | trans({ name: 'Joe' }) }}

[antonkomarev]

@josiasmontag Awesome! Thanks for the tip!

[sistemaswebbrasil]

Testing just like michgeek showed I get to catch the message object with console.log (Lang), but if I try to get some text with Lang.get ('messages.hello'), the chrome console returns me: Uncaught TypeError : Lang.get is not a function

[PhPPgAdminBug]

`window.Lang= require('lang.js');

alert(window.Lang);`

returns
function(options){ options = options || {}; this.locale = options.locale || inferLocale() || defaults.locale; this.fallback = options.fallback; this.messages = options.messag… }

But functions are not avaiable.
alert(window.Lang.get('my.trans_word'));

Returns
Uncaught TypeError : Lang.get is not a function

same as in comment above. Wasted couple of hours, it seems package does not work with Vue.

[rmariuzzo]

Hi @PhPPgAdminBug! Try creating an instance:

var lang = new window.Lang;
alert(lang.get('my.trans_word');

[PhPPgAdminBug]

@rmariuzzo Uncaught TypeError: window.Lang is not a constructor

This package, has same issue.
https://github.com/andywer/laravel-js-localization

[PhPPgAdminBug]

Figured that
window.Lang = require('lang.js/src/lang'); console.log(window.Lang = new Lang({ messages: document.location.hostname + '/js/messages.js', }));

returns
Lang {locale: "ru", fallback: undefined, messages: "domain.app/js/messages.js"}

But:
window.Lang = require('lang.js/src/lang'); console.log(window.Lang = new Lang({ messages: document.location.hostname + '/js/messages.js', }).has('somte.word'));

is always FALSE, while messages path to file is right, and there are all messages

Also, this one part of code will not work
`import lang from 'lang.js';
import messages from 'js/messages';

const Lang = new lang({
messages
});

export default Lang;`

Because it imports node_modules files. If we put messages files to assets/js, it will throw MIX errors, errors, and errors again.

[rmariuzzo]

@PhPPgAdminBug the messages value should not be a path, instead it should the messages.js file contents. Please, double check that.

[rmariuzzo]

The original reported issue will be tracked at: #63