This package is a webpack loader to import your laravel translation files (PHP or JSON) into your JS bundle as JSON.
Switch branches/tags
Nothing to show
Clone or download
Latest commit c7cc38b Oct 5, 2018

readme.md

npm npm license tests

This package is a webpack loader to import your laravel translation files (PHP or JSON) into your JS bundle as JSON so you can use packages like i18next.

Requirements

This package works with any version of laravel, as long as you are using Laravel Mix or any custom webpack configuration, since this package is essentially a webpack loader.

Installation

$ yarn add @kirschbaum-development/laravel-translations-loader --dev

or

$ npm install @kirschbaum-development/laravel-translations-loader --save-dev

Usage

If you prefer, we have a demo project showing how to use it on laravel.

In your app.js file, just add the following import.

import languageBundle from '@kirschbaum-development/laravel-translations-loader!@kirschbaum-development/laravel-translations-loader';

This will load and parse all your language files, including PHP and JSON translations. The languageBundle will look something like this:

{
    "en": {
        "auth": {
            "failed": "These credentials do not match our records."
        }
    },
    "es": {
        "auth": {
            "failed": "Estas credenciales no coinciden con nuestros registros."
        }
    }
}

And so on, with all your languages and all your translation strings.

Namespacing

Some packages like i18next require a "namespace" before your actual translations. When this happens, you can import your files like this:

import languageBundle from '@kirschbaum-development/laravel-translations-loader?namespace=translation!@kirschbaum-development/laravel-translations-loader';

And your translations will be loaded with the specified namespace in front of the translations:

{
    "en": {
        "translation": {
            "auth": {
                "failed": "These credentials do not match our records."
            }
        }
    },
    "es": {
        "translation": {
            "auth": {
                "failed": "Estas credenciales no coinciden con nuestros registros."
            }
        }
    }
}

Load only JSON translations

import languageBundle from '@kirschbaum-development/laravel-translations-loader/json!@kirschbaum-development/laravel-translations-loader';

Load only PHP translation files

import languageBundle from '@kirschbaum-development/laravel-translations-loader/php!@kirschbaum-development/laravel-translations-loader';

Replacing Laravel Parameters

Sometines your javascript library may need to use a parameter syntax different than the one Laravel ships (e.g. :input). For that, you can just pass an additional parameter when importing the bundle. Let's say you want to change from :input to {{ input }}. You just need to add the parameters option:

import languageBundle from '@kirschbaum-development/laravel-translations-loader/php?parameters={{ $1 }}!@kirschbaum-development/laravel-translations-loader';

And that's it. Your parameters will be replaced by your new syntax. Important: Don't forget to use the $1 or the parameter name will not be populated.

Using a different folder

If you are developing a package or for some reason have a different location for your translations, you can configure that by creating a .js file on your translations folder. For example, let's say you want to load translations on the language vendor folder.

First thing you need is to create a index.js file (empty, no content needed) on the resources/lang/vendor/{package-name}.

Then, you just need to reference this file when importing the translations:

'@kirschbaum-development/laravel-translations-loader/php!resources/lang/vendor/{package-name}';

This will make the package loads your translations from resources/lang/vendor/{package-name} instead of resources/lang.

Configuring in webpack.config.js

You can also apply the same configurations showed above directly on webpack.config.js. For that, just include the following rules in your config file:

rules: [
    {
        test: path.resolve(__dirname, 'resources/lang/index.js'), // path to your index.js file
        loader: '@kirschbaum-development/laravel-translations-loader/php?parameters={$1}'
    }
]

Then, you just need to import the index.js file:

import languageBundle from 'resources/lang/index.js';

For Laravel Mix, just apply the same configuration in the following way:

mix.webpackConfig({
    rules: [
        {
            test: path.resolve(__dirname, 'resources/lang/index.js'), // path to your index.js file
            loader: '@kirschbaum-development/laravel-translations-loader/php?parameters={$1}'
        }
    ]
});

Useful packages to use with laravel-translations-loader


Example using vue-i18n

Notice you can directly pass the languageBundle object as a parameter into the VueI18n constructor.

import languageBundle from '@kirschbaum-development/laravel-translations-loader!@kirschbaum-development/laravel-translations-loader';
import VueI18n from 'vue-i18n';
Vue.use(VueI18n);

const i18n = new VueI18n({
    locale: window.Locale,
    messages: languageBundle,
})