Neural Processing Mechanisms

    @kirschbaum-development/laravel-translations-loader

    1.3.2 • Public • Published

    Laravel Supported Versions npm npm license Actions Status

    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 to make this more readable. For that, follow these steps:

    1. Create an empty index.js file on the resources/lang/index.js path.

    2. 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 recently created index.js file on your app.js (or whatever other) file:

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

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

    Laravel Mix 3:

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

    Laravel Mix 4:

    mix.extend('translations', new class {
        webpackRules() {
            return {
                test: path.resolve(__dirname, '../resources/lang/index.js'),
                loader: '@kirschbaum-development/laravel-translations-loader/php?parameters={$1}'
            }
        }
    });
    
    mix.translations();

    Laravel Mix 6:

    mix.extend('translations', new class {
        webpackRules() {
            return {
                test: path.resolve(__dirname, './resources/lang/index.js'),
                loader: '@kirschbaum-development/laravel-translations-loader/php',
                options: {
                    parameters: "$1",
                    includeOnly: ['auth', 'validation'],
                    exclude: [],
                }
            }
        }
    });
    
    mix.translations();

    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?parameters={$1}!@kirschbaum-development/laravel-translations-loader';
    import VueI18n from 'vue-i18n';
    Vue.use(VueI18n);
    
    const i18n = new VueI18n({
        locale: window.Locale,
        messages: languageBundle,
    })

    Security

    If you discover any security related issues, please email luis@kirschbaumdevelopment.com or nathan@kirschbaumdevelopment.com instead of using the issue tracker.

    Credits

    Sponsorship

    Development of this package is sponsored by Kirschbaum Development Group, a developer driven company focused on problem solving, team building, and community. Learn more about us or join us!

    License

    The MIT License (MIT). Please see License File for more information.

    Install

    npm i @kirschbaum-development/laravel-translations-loader

    DownloadsWeekly Downloads

    2,021

    Version

    1.3.2

    License

    none

    Unpacked Size

    229 kB

    Total Files

    22

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar