martinlindhe / laravel-vue-i18n-generator Goto Github PK
View Code? Open in Web Editor NEWGenerates a vue-i18n compatible include file from your Laravel translations
License: MIT License
Generates a vue-i18n compatible include file from your Laravel translations
License: MIT License
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?
There is no way to translate string as key. It supports only normal keys.
Is there a way to exclude a directory?
I have a front-end lang folder which have files
And an back-end lang folder which have files
And that wont work with the config exclude, since both files have the same names..
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?
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,
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
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
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,
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.
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?
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
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 ?
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 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.
Hello.
into method getFileName of file GenerateInclude.php you should use public_path() instead of base_path().
Bye
Paolo
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.
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.
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.
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.
When putting language files in subdirectories, these directories cause an error:
Undefined index: extension
Would be nice to scan subdirectories.
On attempting to install on laravel 5.7, I get this error
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
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.
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!
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!
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:
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
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
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
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
.
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 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'.
How would this work with Spark?
Hi Martin,
Will this package be ready for Laravel 5.8 soon?
Thanks!
Michael
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.
/**
* 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'
});
});
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.
Add a --format
option which can take es6
, umd
or json
. (Defaults to es6
)
// e.g.
php artisan vue-i18n:generate --format json
Either es6 or umd is supported.
// es6
php artisan vue-i18n:generate
// umd
php artisan vue-i18n:generate --umd
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!
Hi, when i run the command:
php artisan vue-i18n:generate
The file vue-i18n-locales.generated.js only contains
export default
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?
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.
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.
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
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 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?
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?
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!
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.
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!
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' }) }}
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, 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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.