8

I'm trying to add localization support for a card built for the Laravel Nova dashboard.

I already created a folder in /resources/lang containing the JSON language files in a format like en.json. The files get published (copied) with the publish command but the loadJsonTranslationsFrom() does not seem to do anything:

class CardServiceProvider extends ServiceProvider
{
  public function boot()
  {
    $this->publishes(
      [__DIR__ . '/../resources/lang' => resource_path('lang/vendor/my-custom-card')],
      'my-custom-card-lang'
    );

    $this->loadJsonTranslationsFrom(resource_path('lang/vendor/my-custom-card'));
  }
}

This is how the markup in Card.vue looks like:

{{__('Title')}}

How can I test if the JSON files are loaded correctly? What am I missing?

The question is how do I support localization for cards in Laravel Nova?

2 Answers 2

4

Card localization has been solved in Laravel Nova 2.

To localize strings use the __ helper within your Vue components and load the according translation files within your NovaServiceProvider:

Nova::serving(function (ServingNova $event) {
    Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
    Nova::style('{{ component }}', __DIR__.'/../dist/css/card.css');
    Nova::translations(__DIR__.'/../resources/lang/en/card.json');
});

An exemplary implementation can be found on GitHub.

Further information is now available in the documentation.

1

I'm having the same issue, but for a tool, also in Nova 2.0.
I found a somewhat elegant solution - maybe it helps someone nonetheless.

  • Create en.json in /nova-components/{your-tool}/resources/lang/
  • In /nova-components/{your-tool}/resources/js/tool.js add Vue.mixin(require('./translation'));.
    It should look something like this:

    Nova.booting((Vue, router, store) => {
        router.addRoutes([
            {your-routes}
        ]);
        Vue.mixin(require('./translation'));    <-------------- add this line!
    });
    
  • Create the /nova-components/{your-tool}/resources/js/translation.js, it should look like this:

    module.exports = {
        methods: {
            __(key, replace) {
                var translations = _.merge(window.config.translations, window.config['tool-translations']);
                var translation = translations[key]
                    ? translations[key]
                    : key;
    
                _.forEach(replace, (value, key) => {
                    translation = translation.replace(':' + key, value)
                });
    
                return translation;
            }
        }
    };
    
  • Now you have to add the following to the Nova::serving() function inside the boot() function of your /nova-components/{your-tool}/src/ToolServicePrivoder.php file:

    Nova::provideToScript([
        'tool-translations' => $this->getTranslations(),
    ]);
    
  • Now add below said boot() function the following:

    private static function getTranslations()
    {
        $translationFile = __DIR__ . '/../resources/lang/' . app()->getLocale() . '.json';
    
        if (!is_readable($translationFile)) {
            return [];
        }
    
        return json_decode(file_get_contents($translationFile), true);
    }
    
1
  • Nova docs is failing us once again, in the docs they only mention the en.json file, not that we need all this code to get it working Aug 6, 2019 at 8:38

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.