• Stars
    star
    594
  • Rank 75,329 (Top 2 %)
  • Language
    PHP
  • License
    MIT License
  • Created over 10 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🌐 Convert your Laravel messages and consume them in the front-end!

Laravel JS Localization - Convert you Laravel messages and use them in the front-end!

Laravel 5.5 Laravel 4.2 Latest Stable Version Total Downloads License

This package convert all your localization messages from your Laravel app to JavaScript with a small library to interact with those messages following a very similar syntax you are familiar with.

Features

  • Support Laravel 4.2, 5.0, 5.1, 5.2, 5.3, 5.4, 5.5, 6.x, 7.x and 8.x!
  • Includes Lang.js (a thin library highly inspired on Laravel's Translator class).
  • Allow to specify desired lang files to be converted to JS.
  • Lang.js API is based on Laravel's Translator class. No need to learn a whole API.

⭐ Webpack user? Try the new and shiny Laravel localization loader for Webpack!

Installation

composer require mariuzzo/laravel-js-localization

In your Laravel app go to config/app.php and add the following service provider:

Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider::class

Usage

The Laravel-JS-Localization package provides a command that generate the JavaScript version of all your messages found at: app/lang (Laravel 4) or resources/lang (Laravel 5) directory. The resulting JavaScript file will contain all your messages plus Lang.js (a thin library highly inspired on Laravel's Translator class).

Generating JS messages

php artisan lang:js

Specifying a custom target

php artisan lang:js public/assets/dist/lang.dist.js

Compressing the JS file

php artisan lang:js -c

Specifying a custom source folder

php artisan lang:js public/assets/dist/lang.dist.js -s themes/default/lang

Output a JSON file instead.

php artisan lang:js --json

Configuration

First, publish the default package's configuration file running:

php artisan vendor:publish --provider="Mariuzzo\LaravelJsLocalization\LaravelJsLocalizationServiceProvider"

The configuration will be published to config/localization-js.php.

You may edit this file to define the messages you need in your Javascript code. Just edit the messages array in the config file. Empty messages array will include all the language files in build.

To make only pagination.php and validation.php files to be included in build process:

<?php

return [
    'messages' => [
        'pagination',
        'validation',
    ],
];

Using gulp (optional)

Install gulp-shell and then run it directly in your gulpfile.js:

var shell = require('gulp-shell');

gulp.task('langjs', shell.task('php artisan lang:js -c public/js/messages.js'));

Using Laravel's elixir (optional)

Before Elixir 4.0:

elixir.extend('langjs', function(path) {
    gulp.task('langjs', function() {
        gulp.src('').pipe(shell('php artisan lang:js ' + (path || 'public/js/messages.js')));
    });

    return this.queueTask('langjs');
});

Elixir 4.0+:

var Task = elixir.Task;
elixir.extend('langjs', function(path) {
    new Task('langjs', function() {
        gulp.src('').pipe(shell('php artisan lang:js ' + (path || 'public/js/messages.js')));
    });
});

And use it like this:

elixir(function(mix) {
    mix.langjs();
});

Using Laravel's Mix with Laravel 5.4+ (optional)

Add "webpack-shell-plugin-next" to package.json's "devDependencies" section.

Add the following to webpack.mix.js:

const WebpackShellPluginNext = require('webpack-shell-plugin-next');

// Add shell command plugin configured to create JavaScript language file
mix.webpackConfig({
    plugins:
    [
        new WebpackShellPluginNext({onBuildStart:['php artisan lang:js --quiet'], onBuildEnd:[]})
    ]
});

Documentation

This is a quick documentation regarding Lang.js (the thin JavaScript library included by Laravel-JS-Localization). The Lang.js (a thin library highly inspired on Laravel's Translator class).

πŸ’ Go to Lang.js documentation to see all available methods.

Getting a message

Lang.get('messages.home');

Getting a message with replacements

Lang.get('messages.welcome', { name: 'Joe' });

Changing the locale

Lang.setLocale('es');

Checking if a message key exists

Lang.has('messages.foo');

Support for singular and plural message based on a count

Lang.choice('messages.apples', 10);

Calling the choice method with replacements

Lang.choice('messages.apples', 10, { name: 'Joe' });

πŸ’ Go to Lang.js documentation to see all available methods.

Want to contribute?

  1. Fork this repository and clone it.
  2. Create a feature branch from develop: git checkout develop; git checkout -b feature-foo.
  3. Push your commits and create a pull request.

Prerequisites:

You will need to have installed the following softwares.

  • Composer.
  • PHP 5.5+.

Development setup

After getting all the required softwares you may run the following commands to get everything ready:

  1. Install PHP dependencies:

    composer install
  2. Install test dependencies:

    composer test-install

Now you are good to go! Happy coding!

Testing

This project uses PHPUnit. All tests are stored at tests directory. To run all tests type in your terminal:

composer test

Made with ❀️ by Rubens Mariuzzo.

MIT license

More Repositories

1

react-new-window

πŸ”² Pop new windows in React, using `window.open`.
JavaScript
407
star
2

Lang.js

🎭 Laravel Translator class in JavaScript!
JavaScript
259
star
3

checkboxes.js

β˜‘οΈ A jQuery plugin that gives you nice powers over your checkboxes.
JavaScript
130
star
4

laravel-localization-loader

Laravel Localization loader for webpack. Convert Laravel Translation strings to JavaScript Objects.
JavaScript
68
star
5

dom-navigator

βš“οΈ JS library that allow keyboard navigation through DOM elements (←↑→↓).
JavaScript
40
star
6

react-chronos

β›“ React chronology component providing dual chronological timelines.
JavaScript
39
star
7

github-banner

⚑️ Generate a GitHub banner for your repo!
JavaScript
35
star
8

cloud9-emmet-ext

A Cloud9IDE extension for emmet.io (aka ZenCoding) integration.
JavaScript
26
star
9

lowdb-api

⚑️ lowdb-api - Express middleware that serve a virtual RESTful API.
JavaScript
25
star
10

spotlight-never-index

Exclude some folders from Spotlight.app
JavaScript
21
star
11

Laravel-Translator

Laravel command that interactively helps you translate missing keys.
PHP
19
star
12

config-webpack-plugin

πŸ’« Merge one or more configuration files together with environment variables too.
JavaScript
18
star
13

react-input-handler

⚑️ Utility function to handle input changes in React.
JavaScript
15
star
14

ruty

πŸ“¦ Ruty is a simple URL route builder, that support typing route params and queries string with TypeScript.
TypeScript
15
star
15

shorted-theme

Shorted theme references for Styled Components.
TypeScript
14
star
16

php-array-to-json

✨ Convert PHP configuration array files to JSON files. Useful to convert Laravel's PHP localization files into JSON files.
JavaScript
10
star
17

mkdir-date

A tool to create directories for each days in a period of time.
JavaScript
10
star
18

jQuery-Ajax-Latency-Simulator-Plugin

A jQuery plugin that simulate latency for any AJAX request via jQuery plugin
JavaScript
9
star
19

grunt-fb-flo

Starts a fb-flo server
JavaScript
8
star
20

Rachel

πŸš€ Quickly create a RESTful client!
JavaScript
7
star
21

rmariuzzo

Rubens' professional information that appears in GitHub.
JavaScript
6
star
22

fuf-cli

πŸ” fuf – Find Unused Files in a directory with a single command.
JavaScript
6
star
23

react-scrollie

Scroll listener React component that provide scrolling info
JavaScript
6
star
24

fotch

Fotch – In browser fake REST API for creative development purposes!
TypeScript
5
star
25

react-grille

Make a grille pattern! AKA grid pattern or mesh!
JavaScript
5
star
26

markdown-exec

Execute commands in your Markdown and keep the output.
JavaScript
5
star
27

fuf

πŸ” fuf – Find Unused Files in a directory.
JavaScript
5
star
28

chalk-printer

NodeJS library to print colored message in the console.
JavaScript
5
star
29

inspirabbble

Inspire yourself with fresh shots from Dribbble!
JavaScript
4
star
30

php-array-loader

PHP array loader module for webpack
JavaScript
4
star
31

php-array-parser

✨ Parse a PHP array
JavaScript
4
star
32

Mariuzzo.Web.Mvc.Extras

Extra missing components for ASP.NET MVC.
C#
4
star
33

entrify

πŸ“¦ Library to convert package.json to index.js.
JavaScript
3
star
34

google-images-url

πŸ”— URL generator for Google Images
JavaScript
3
star
35

node-typescript-template

A template repo for Node and Typescript.
TypeScript
3
star
36

untoken

A token replacement tool.
TypeScript
3
star
37

calendar

A calendar widget.
TypeScript
3
star
38

untoken-cli

A token replacement CLI tool for text.
TypeScript
3
star
39

Gistie

Gist plugin for October CMS. Provides a simple way to share snippets and pastes with others using Github's gist.
PHP
3
star
40

easy-peasy-thunk-stages

Thunk stages in your model is easy-peasy!
TypeScript
2
star
41

knowledge

List of stuff I have learnt ...
2
star
42

xml-comment-api

Parse XML comment that provide an API
JavaScript
2
star
43

jQuery-Annotation-Plugin

jQuery Annotation Plugin
JavaScript
2
star
44

fixture-middleware

Use fixture data in your express app!
JavaScript
2
star
45

mishell

Mishell: collection of shell utilities.
TypeScript
2
star
46

directory-tree

Generate a tree of directories.
TypeScript
2
star
47

githood

Run commands in a group of git repos.
TypeScript
2
star
48

re-ducks

Library to reduce common tasks for React apps based on re-ducks (https://github.com/alexnm/re-ducks)
JavaScript
2
star
49

restful-api-course

The RESTful API course
JavaScript
2
star
50

attention-jquery-plugin

A jQuery plugin to call attention to any HTML element.
1
star
51

JavaScript-Prototype-Programming-Talk

Code used for the talk "JavaScript Prototype Programming" by @rmariuzzo
JavaScript
1
star
52

jQuery-Lockable-Plugin

A jQuery plugin that locks / unlocks any Textbox.
1
star
53

commons-css

A set of commons CSS to be reused, instead of writing it over & over.
1
star
54

grunt-talk

Introductory talk about Grunt (in spanish) β€” Automatizando el desarrollo front-end con Grunt.
1
star
55

entrify-cli

πŸ“¦ CLI tool to convert package.json to index.js.
JavaScript
1
star
56

chronometer

Experiment: Chronometer desktop app using Go and Fyne.
Go
1
star