martinlindhe / laravel-vue-i18n-generator Goto Github PK

Hi I get this error when trying to run

php artisan vue-i18n:generate

[ErrorException] Argument 1 passed to MartinLindhe\VueInternationalizationGenerator\Generator::adjustArray() must be of the type array, integer given, called in /home/dev/laravel/vendor/martinlindhe/laravel-vue-i18n-generator/src/Generator.php on line 49 and defined

First I tried using vue-i18n package. After facing same error as described in #29 I tried that approach, but still it didn't work... got this instead:

any idea?

Hi,

I have a problem when try generate translation for VUE.

In source language file i have:

 'description' => 'Przesyłka kurierska z doręczeniem do godziny 10:00 następnego dnia.'

when i use php artisan vue-i18n:generate

then get:

  "description": "Przesyłka kurierska z doręczeniem do godziny 10{00} następnego dnia."

why is there no escape char to skip the selected colon?

Hello,
thank for this package (but its not working for me :) )
i get this message after make everything like description:

Uncaught TypeError: Vue.locale is not a function
    at app.js:18
    at Array.forEach (<anonymous>)
    at Object../resources/assets/js/app.js (app.js:17)
    at __webpack_require__ (bootstrap 1b252795b9032e827bb4:54)
    at Object.0 (app.js?id=549aa35d4febc37b4843:31457)
    at __webpack_require__ (bootstrap 1b252795b9032e827bb4:54)
    at webpackJsonpCallback (bootstrap 1b252795b9032e827bb4:25)
    at app.js?id=549aa35d4febc37b4843:1

and the package installed in fresh laravel 5.5 project.
versions:
"vue-i18n": "^7.1.1",
"vue": "^2.1.10"

Hello,
I got some empty curly braces in generated string when translation string ends with colon.
For example in translation file:
Test:
and I am getting this:
Test{}

When this regexp '/(?<!mailto|tel):\w*/' in adjustString method is changed to '/(?<!mailto|tel):\w+/', it generates normal string Test: as expected.

Is there a way to exclude a directory?

I have a front-end lang folder which have files

• index.php
• other files

And an back-end lang folder which have files

• index.php
• other files

And that wont work with the config exclude, since both files have the same names..

Hei

Our lang keys are separated with colons (:) for namespacing reasons and it seems that all keys are also sent through adjustString() which replaces them similar to values.
I can't think of the benefit of sending keys through the same transformation, am I missing something?

'spa:page:title:dashboard' => 'Dashboard',

ends up

 "spa{page}{title}{dashboard}": "Dashboard",

Hi, thanks a lot for providing this package. :)

I have multiple directories in the resources/lang directory, because my app serves different language files for each environment like:

resources/lang
resources/lang/en
resources/lang/en/backend
resources/lang/en/frontend

In the en directory are shared language files, in the backend and frontend directories are special language files. But if I use the --multi flag I get the following error:

file_put_contents(.../public/js/lang/backend/auth.js): failed to open stream: No such file or directory

This is because the file_put_contents method won't create the directories.

What do you think about adding this feature?

vue-i18n-locales.generated.js?7708:1 Uncaught SyntaxError: Unexpected token export(anonymous function) @ web.js:1351__webpack_require__ @ web.js:556fn @ web.js:87(anonymous function) @ web.js?f2b0:6(anonymous function) @ web.js:782__webpack_require__ @ web.js:556fn @ web.js:87(anonymous function) @ web.js:587__webpack_require__ @ web.js:556(anonymous function) @ web.js:579(anonymous function) @ web.js:582 client.js?c49f:58 [HMR] connected

I import it like this:
`
import Vue from 'vue'
import vueViewport from 'vue-viewport'
import vueResource from 'vue-resource'
import VueI18n from 'vue-i18n'

import Locales from './../../vue-i18n-locales.generated.js'

Vue.use(vueViewport)
Vue.use(vueResource)
Vue.use(VueI18n)

Vue.config.lang = 'nl'

Vue.use(VueI18n, {
lang: 'nl',
locales: Locales
})
`

And using babel to compile this.

Hi, when i run the command:
php artisan vue-i18n:generate
The file vue-i18n-locales.generated.js only contains
export default

I have a seperate Modules folders where i have a folder per module. Within each module folder i have the translations for that module.

With laravel i can get this translatation with:

@lang('module::validation.key')

Now i only can configure a string for the langPath config option, but i want to set multiple locations so i can use all the translation i have.

Is it possible to make the langPath have an array with multiple paths and get the translation with:

$t('module::validation.key')

I'm promattically run following command to generate latest changes in vue-i18n-locales.generated.js file,
Artisan::queue('vue-i18n:generate');
after this command executed translations does not update until i run npm run dev/production
any solution for this?

HI

there is an error when running the command php artisan vue-i18n:generate

"laravel/framework": "5.7.*"
"martinlindhe/laravel-vue-i18n-generator": "^0.1.29"

vue-i18n@^8.1.0:

below is the error message i get with php artisan vue-i18n:generate -v

E:\web\vervelsgroup\test.local\vendor\martinlindhe\laravel-vue-i18n-generator\src\Commands\GenerateInclude.php:48

MartinLindhe\VueInternationalizationGenerator\Commands\GenerateInclude::handle()
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Container\BoundMethod.php:29

call_user_func_array([])
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Container\BoundMethod.php:29

Illuminate\Container\BoundMethod::Illuminate\Container\{closure}()
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Container\BoundMethod.php:87

Illuminate\Container\BoundMethod::callBoundMethod(Object(Illuminate\Foundation\Application), Object(Closure))
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Container\BoundMethod.php:31

Illuminate\Container\BoundMethod::call(Object(Illuminate\Foundation\Application), [])
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Container\Container.php:564

Illuminate\Container\Container::call()
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Console\Command.php:183

Illuminate\Console\Command::execute(Object(Symfony\Component\Console\Input\ArgvInput), Object(Illuminate\Console\OutputStyle))
E:\web\vervelsgroup\test.local\vendor\symfony\console\Command\Command.php:251

Symfony\Component\Console\Command\Command::run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Illuminate\Console\OutputStyle))
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Console\Command.php:170

Illuminate\Console\Command::run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\vendor\symfony\console\Application.php:886

Symfony\Component\Console\Application::doRunCommand(Object(MartinLindhe\VueInternationalizationGenerator\Commands\GenerateInclude), Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\vendor\symfony\console\Application.php:262

Symfony\Component\Console\Application::doRun(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\vendor\symfony\console\Application.php:145

Symfony\Component\Console\Application::run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Console\Application.php:89

Illuminate\Console\Application::run(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\vendor\laravel\framework\src\Illuminate\Foundation\Console\Kernel.php:122

Illuminate\Foundation\Console\Kernel::handle(Object(Symfony\Component\Console\Input\ArgvInput), Object(Symfony\Component\Console\Output\ConsoleOutput))
E:\web\vervelsgroup\test.local\artisan:37

Hello!
First of all, thanks for this awesome package, it really helps!
But now I'm facing an issue, when I place html string in my translation's files, then, the generated .js shows unnecesary escape characters.

For example, in lang/en/test.php
'test' => 'It is a <strong>Test</strong> ok!',

Then, after generating, in my messages.js, It shows
'test' => 'It is a <strong>Test<\/strong> ok!',

Notice the unnecessary escape character. How could I fix this? If possible!

Thanks!

I’m trying to add : in a string as just plain text but the converter sees it as a variable and converts it to {}. Is there some way to only convert : with a variable name like ':name'.

Hello,

When I run php artisan vue-i18n:generate I get the following error:

/vendor/martinlindhe/laravel-vue-i18n-generator/src/Commands/GenerateInclude.php : 48

  2   MartinLindhe\VueInternationalizationGenerator\Commands\GenerateInclude::handle()
      /vendor/laravel/framework/src/Illuminate/Container/BoundMethod.php : 29

On top of this, the complete json is beeing printed so I can't see what's happening exactly.
I'm using the latest version of this package with Laravel 5.7.3

Is there some way I can see what's going on?

Thanks!

The package does not fetch the translations as I expected it to.
Is the i18n arrays supposed to be empty like this?
"i18n": { "ro_RO": { "LC_MESSAGES": [] }, "sv_SE": { "LC_MESSAGES": [] } }
I have two languages where I have translations from sv_SE to ro_RO. All the other out of the box Laravel specific validation messages are working.

Installed the package on Laravel 5.3
Installed vue-i18n
generated the include file

then added:

window.Vue = require('vue');
import VueInternationalization from 'vue-i18n';
import Locales from './vue-i18n-locales.generated.js';

Vue.use(VueInternationalization, {
    lang: 'fa',
    locales: Locales
});

Now when adding a translate like {{ $t('app.email') }}, the browser-console give me this error message:

[vue-i18n] Cannot translate the value of keypath "app.register_email". Use the value of keypath as default

But when using this code, it works!

var VueI18n = require('vue-i18n')
import locales from './vue-i18n-locales.generated.js';

// set lang
Vue.config.lang = 'fa'

// set locales
Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang])
})

I am using your generator. I have this code:

if(!self.form.deliveryService)
                {
                    self.formError.deliveryService = 'Loading services...';
                    swal('Loading services...');
                    swal.showLoading();
                }else {
                    self.formError.deliveryService = 'Loading the service...';
                }

How do i translate the 'loading services'? Tried {{$t(vue.loadingservices')}} but nothing appears.

I'm getting following error when I'm trying using translations in the component.
TypeError: Cannot read property '_t' of undefined

Here is my setup:

import Vue from 'vue';

import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';

Vue.use(VueInternationalization);

const lang = 'en';

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

import MainComponent from './components/MainComponent.vue';

import router from './router';

new Vue(Vue.util.extend({ router }, MainComponent), i18n).$mount('#app');

& I'm trying using in the component like
{{ this.$t('message.frontend.home') }}
or
{{ $t('message.frontend.home') }}

both times I'm getting same error.

Since I'm not using browserify, I'd like to put the generated file somewhere else (inside public in my case); is there a way to do it without forking the project and modifying the sources? AFAIK, the path is hardcoded into laravel-vue-i18n-generator/src/Commands/GenerateInclude.php.

Laravel supports translation strings. These files can look like this:

{
    "Hello :name": "Hello :name"
}

The package should generate following code in the *.generated.js file

{
    "Hello {name}": "Hello {name}"
}

What it actually generates is the following

{
    "Hello :name": "Hello {name}"
}

Therefore I cannot translate the string with this method {{ $t("Hello {name}", { name: "John' }) }}

Hi, first of all thanks for the hard work for this project. I'd really like to use this to have a single source for i18n but would like to output the results as JSON.
This is because I'd like to lazy load the translation files from my SPA depending on which language has been requested.

Proposed Behavior

Add a --format option which can take es6, umd or json. (Defaults to es6)

// e.g.
php artisan vue-i18n:generate --format json

Current Behavior

Either es6 or umd is supported.

// es6
php artisan vue-i18n:generate

// umd
php artisan vue-i18n:generate --umd

Possible Solution

Since adding --json will become cumbersome, how about refactoring it to --format which takes es6, umd or json? But keep --umd for backwards compatibility.

I would like to hear your thoughts @martinlindhe and am also willing to contribute :)
Thanks!

I want to make some contribution but i have a problem when running tests.
I think it was because the DirectoryIterator didn't return the same directory structure as the OS filesystem. It randomly sorted.

expected - (result):
[0]. (sv)
[1].. (..)
[2]en (en)
[3]sv (.)

Do you have any solution for this problem ?

PS: My environtment is Laravel Homestead

In config/vue-i18n-generator.php we have this line 'langPath' => '/resources/lang', from where we can set the trans files path.

But if I want to add only one translation file to my vue app?
Right now I have many translation files, but I need only one for the vue app, and I dont want to export all of the files in the json. How can I do this?

Hello,

The explanation on UMD module is not very clear to me.
I did not quite understand the utility?

I also have the following error:
(View.config.lang = Laravel.language)

ReferenceError: Laravel is not defined

Thank you

Hello,

i seems that it's not possible to have json translations and array translations at the same time,
when using --multi-locales option.

In Generator.php line 75 :

if ($fileinfo->isDir()) {
                    $local = $this->allocateLocaleArray($fileinfo->getRealPath());
                } else {
                    $local = $this->allocateLocaleJSON($fileinfo->getRealPath());
                    if ($local === null) continue;
                }

if the locale exist as a directory, then the json translation is never applied.

thanks.

When choosing format as json it could be a fine generating file with json extension.

Maybe rename jsPath and jsFile to outputPath and outputFile, add outputExtension.

There is no way to translate string as key. It supports only normal keys.

Argument 1 passed to MartinLindhe\VueInternationalizationGenerator\Generato
r::adjustArray() must be of the type array, integer given, called in D:\Pro
yectos\Laravel\Production\soyjugador.net.dev\vendor\martinlindhe\laravel-vu
e-i18n-generator\src\Generator.php on line 64 and defined

I've run vendor:publish lot times, but does not work

The idea is to add some example projects that correctly make use of specific versions of vue-i18n and vuex-i18n, to point at from the README to some known correct usage. We could then just extend the examples with more versions when need arise.

We could then use docker to run the examples and have more confidence the package is working as expected.

Previous discussion in #40

I don't have immediate time to work on this idea, so anyone interested are very welcome to pick this up and work with.

Hi Martin,

Would it be possible to make the output messages optional? When using Artisan::call('vue-i18n:generate') in Laravel Nova this could break some JSON output as it's not valid JSON.

Update: just added a PR

When I use multiple connected replacement parameter in my laravel localisation files like this:

'image_size_between' => 'The size of this image must to be between :minWidthx:minHeight and :maxWidthx:maxHeight',

In a laravel balde the result of

@lang('validation.image_size_between', [
    'minWidth'  => 720,
    'minHeight' => 540,
    'maxWidth'  => 1920,
    'maxHeight' => 1200,
])"

is
The size of this image must to be between 720x540 and 1920x1200

I want to make a vue-i18n formation in a vue component but unfortunately this part of the vue-i18n-locales.generated.js file is
"image_size_between": "The size of this image must to be between {minWidthx}{minHeight} and {maxWidthx}{maxHeight}",

what is not good for me, because I need that x between those two parameters (an with space it looks ugly).

Is there any idea to solve this issue with this package?

I have a separated my application in separate modules (using nwidart/laravel-modules), now I have language files in different folders. Could you add support to add multiple folders to read the language files from?

When putting language files in subdirectories, these directories cause an error:
Undefined index: extension

Would be nice to scan subdirectories.

Is it possible to generate separate vue-i18n-locales files for separate locales?

I don’t want to load all the locales in the initial load, want to lazy load the locales using Vuex-i18n.

Hello,

I am using vee-validate and it would be great if laravels validation file could be used for vee-validate messages.
It should be really easy to implement.
The only changes are the following:

• single file for each locale
• all {attribute} must be replaced with {field}
• an extra file for validation rules for vee-validate, because they have the following structure:

const messages = {
  _default: (field) => `The ${field} value is not valid.`,
  in: (field) => `The ${field} field must be a valid value.`,
  //etc..
};

const locale = {
  name: 'en',
  messages,
  attributes: {}
};

export default locale

This is really great for custom rules, so you don't need to define those rules on server and also client side.
Let me know what you guys think.

Cheers,

Marco

On attempting to install on laravel 5.7, I get this error

• Installation request for martinlindhe/laravel-vue-i18n-generator ^0.1.28 -> satisfiable by martinlindhe/laravel-vue-i18n-generator[0.1.28].
• Conclusion: remove laravel/framework 5.7.x-dev
• Conclusion: don't install laravel/framework 5.7.x-dev

Hi Martin,

First of all, thanks for this great package. I'm using it for a L5.6 project and want to use it for another L5.4 project as well. But it seems it wouldn't install correctly, because no vendor files are being published and when I run vue-i18n:generate, I'm getting an error saying "There are no commands defined in the "vue-i18n" namespace.

I did add MartinLindhe\VueInternationalizationGenerator\GeneratorProvider::class, to the list of providers and when I run composer show, I actually see the package listed.

Got any idea what to do next?

Thanks!
Michael

Hello.
into method getFileName of file GenerateInclude.php you should use public_path() instead of base_path().
Bye
Paolo

First of all thank you, this is a very useful package, without it I would have a lot, a lot of work to do.

In the documentation it is written that the i18n plugin does not support pluralization, but from its current documentation, pluralization is part of the core code now.

How can i use this feature now ?

I was testing the idea on having individual locales files like the ones we have on laravel side, so if you are using vue-router to create a SPA , can be used on the component like this https://kazupon.github.io/vue-i18n/en/component.html and we can use webpack 2 advantage of code splitting and dynamic loading, instead of having a big locale file.

Could we get an UMD style export, so we can import the built file it into a build system or in the browser directly?
I am asking because If I let a translator translate stuff in my backend, I have to go in and pull all the translations, run artisan command to generate the .js file, then run my build commands so I can build my app.js again. If it was an umd module, I could just import it in the browser and call it from an Event for example.
I can try and do a PR if that would help?

Hi Martin,

Will this package be ready for Laravel 5.8 soon?

Thanks!

Michael

HI,

I installed your package, added the service provider and when i reload my webpage i get the following error:

ReflectionException (-1)
Class auth does not exist

I encountered that error above and read all issue reports at kazupon/vue-i18n repo. The error happens apparently because the Vue instance is loaded before the localization.

One guy pointed to vuex-i18n, another translation lib. I gave it a shot and this worked like a charm. The best thing: I could use the generated localization files from this package with vuex-i18n. Here is my setup:

import store from './vuex';
import vuexI18n from 'vuex-i18n';
Vue.use(vuexI18n.plugin, store);

import Locales from './vue-i18n-locales.generated.js';
Vue.i18n.add('en', Locales.en);
Vue.i18n.add('de', Locales.de);

// set the start locale to use
Vue.i18n.set(Laravel.locale);

const app = new Vue({
    store, // inject store into all children
    el: '#app',
});

The Laravel.locale comes from my Layout:

<head>
    <!-- Header stuff -->
  
    <!-- Scripts -->
    <script>
        const Laravel = {
            csrfToken: "{{ csrf_token() }}",
            locale: "{{ config('app.locale') }}"
        };
    </script>
</head>

The readme is quiet outdated. Maybe it's not a bad idea to give it an update?
Below is an excerpt from the app.js. I updated it so others can find a small boilerplate for starting with this project easily.
I'm also referencing #27 and #29 as those issues were similar to mine before getting it to work properly.

As you can see I'm using vuex-i18n.

💡 Code

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */
window.Vue = require('vue');

import Vuex from 'vuex';
import VuexI18n from 'vuex-i18n';
import Locales from './vue-i18n-locales.generated.js';

const store = new Vuex.Store();

Vue.use(VuexI18n.plugin, store);

// add translations directly to the application
Object.keys(Locales).forEach(function (lang) {
  Vue.i18n.add(lang, Locales[lang])
});

// set the start locale to use
Vue.i18n.set('nl');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */
Vue.component('example-component', require('./components/ExampleComponent.vue'));


$(document).ready(function() {
	const app = new Vue({
		store,
    	el: '#app'
	});
});

I'm trying to use $t() In vue.js methods, because of pluralization.
Something like that:

pluralCheck() {
                if(1){
                    return $t('messages.one');
                }else{
                    return $t('messages.many')
                }
            }

But I'm getting: ReferenceError: $t is not defined
How can I use this in methods or how to deal with pluralization?

Thanks!

From laravel-vue-i18n-generator v0.1.24 and next releases, I get this error:

> @php artisan package:discover
   ReflectionException  : Class vue-i18n.generate does not exist
  at ~/blog/vendor/laravel/framework/src/Illuminate/Container/Container.php: 767
    763|         if ($concrete instanceof Closure) {
    764|             return $concrete($this, $this->getLastParameterOverride());
    765|         }
    766| 
  > 767|         $reflector = new ReflectionClass($concrete);
    768| 
    769|         // If the type is not instantiable, the developer is attempting to resolve
    770|         // an abstract type such as an Interface of Abstract Class and there is
    771|         // no binding registered for the abstractions so we need to bail out.

  Exception trace:

  1   ReflectionClass::__construct("vue-i18n.generate")
      ~/blog/vendor/laravel/framework/src/Illuminate/Container/Container.php : 767

  2   Illuminate\Container\Container::build("vue-i18n.generate")
      ~/blog/vendor/laravel/framework/src/Illuminate/Container/Container.php : 646

  Please use the argument -v to see more details.

Reproductible:

laravel new blog
cd blog
composer require martinlindhe/laravel-vue-i18n-generator

It might be linked to 5342682#diff-da4b931def3f8c326a12bcc366148836

How would this work with Spark?