Implement i18n localization based on Laravel lang files

composer.json

@@ -20,6 +20,7 @@
         "beyondcode/laravel-dump-server": "^1.0",
         "filp/whoops": "^2.0",
         "fzaninotto/faker": "^1.4",
+        "martinlindhe/laravel-vue-i18n-generator": "^0.1.42",
         "mockery/mockery": "^1.0",
         "nunomaduro/collision": "^3.0",
         "phpunit/phpunit": "^7.5"

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "9766e10b9dc9470c008e9c0b21f6d4d4",
+    "content-hash": "10378cb8a477dbb2e47e8800a62fe942",
     "packages": [
         {
             "name": "beberlei/assert",
@@ -4197,6 +4197,59 @@
             ],
             "time": "2016-01-20T08:20:44+00:00"
         },
+        {
+            "name": "martinlindhe/laravel-vue-i18n-generator",
+            "version": "0.1.42",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/martinlindhe/laravel-vue-i18n-generator.git",
+                "reference": "f546c3f520d085f508b73933000da95ad528e1f1"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/martinlindhe/laravel-vue-i18n-generator/zipball/f546c3f520d085f508b73933000da95ad528e1f1",
+                "reference": "f546c3f520d085f508b73933000da95ad528e1f1",
+                "shasum": ""
+            },
+            "require": {
+                "illuminate/console": "~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|~6.0",
+                "illuminate/support": "~5.1.0|~5.2.0|~5.3.0|~5.4.0|~5.5.0|~5.6.0|~5.7.0|~5.8.0|~6.0",
+                "php": ">=5.5.0"
+            },
+            "require-dev": {
+                "phpunit/phpunit": "~4.7"
+            },
+            "type": "library",
+            "extra": {
+                "laravel": {
+                    "providers": [
+                        "MartinLindhe\\VueInternationalizationGenerator\\GeneratorProvider"
+                    ]
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "MartinLindhe\\VueInternationalizationGenerator\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Martin Lindhe",
+                    "email": "martin@ubique.se"
+                }
+            ],
+            "description": "Generates a vue-i18n compatible include file from your Laravel translations.",
+            "homepage": "http://github.com/martinlindhe/laravel-vue-i18n-generator",
+            "keywords": [
+                "laravel",
+                "vue-i18n"
+            ],
+            "time": "2019-10-22T05:26:37+00:00"
+        },
         {
             "name": "mockery/mockery",
             "version": "1.2.2",

config/vue-i18n-generator.php

@@ -0,0 +1,93 @@
+<?php
+
+return [
+    /*
+    |--------------------------------------------------------------------------
+    | Laravel translations path
+    |--------------------------------------------------------------------------
+    |
+    | The default path where the translations are stored by Laravel.
+    | Note: the path will be prepended to point to the App directory.
+    |
+    */
+
+    'langPath' => '/resources/lang',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Laravel translation files
+    |--------------------------------------------------------------------------
+    |
+    | You can choose which translation files to be generated.
+    | Note: leave this empty for all the translation files to be generated.
+    |
+    */
+
+    'langFiles' => [
+        /*
+        'pagination',
+        'passwords'
+        */
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Excluded files & folders
+    |--------------------------------------------------------------------------
+    |
+    | Exclude translation files, generic files or folders you don't need.
+    |
+    */
+    'excludes' => [
+        /*
+        'validation',
+        'example.file',
+        'example-folder',
+        */
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Output file
+    |--------------------------------------------------------------------------
+    |
+    | The javascript path where I will place the generated file.
+    | Note: the path will be prepended to point to the App directory.
+    |
+    */
+    'jsPath' => '/resources/js/langs/',
+    'jsFile' => '/resources/js/vue-i18n-locales.generated.js',
+
+    /*
+    |--------------------------------------------------------------------------
+    | i18n library
+    |--------------------------------------------------------------------------
+    |
+    | Specify the library you use for localization.
+    | Options are vue-i18n or vuex-i18n.
+    |
+    */
+    'i18nLib' => 'vue-i18n',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Output messages
+    |--------------------------------------------------------------------------
+    |
+    | Specify if the library should show "written to" messages
+    | after generating json files.
+    |
+    */
+    'showOutputMessages' => false,
+
+    /*
+   |--------------------------------------------------------------------------
+   | Escape character
+   |--------------------------------------------------------------------------
+   |
+   | Allows to escape translations strings that should not be treated as a
+   | variable
+   |
+   */
+    'escape_char' => '!',
+];

resources/js/app.js

@@ -1,7 +1,10 @@
 import Vue          from 'vue'
 import VueRouter    from 'vue-router'
+import VueInternationalization from 'vue-i18n';
+import Locale from './vue-i18n-locales.generated';
 
 Vue.use(VueRouter)
+Vue.use(VueInternationalization);
 
 import App          from './views/App'
 import Login        from './views/Login'
@@ -19,6 +22,14 @@ library.add(faPlus, faQrcode, faImage, faTrash, faEdit, faCheck, faLock, faLockO
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
 
+// const lang = document.documentElement.lang.substr(0, 2);
+const lang = 'en';
+
+const i18n = new VueInternationalization({
+    locale: lang,
+    messages: Locale
+});
+
 const router = new VueRouter({
     mode: 'history',
     routes: [
@@ -70,5 +81,6 @@ const router = new VueRouter({
 const app = new Vue({
     el: '#app',
     components: { App },
+    i18n,
     router,
 });

resources/views/landing.blade.php

@@ -14,5 +14,6 @@
     </div>
     <script src="{{ mix('js/bootstrap.js') }}"></script>
     <script src="{{ mix('js/app.js') }}"></script>
+    <script src="{{ asset('js/vue-i18n-locales.generated.js') }}"></script>
 </body>
 </html>