Laravel Nova card localization

Question

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?

Indoiranian

Answer 1

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.

Indoiranian

Answer 2

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);
  }
  

Kella

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 – Enchase