This package helps you to have Laravel translation functionality in your client side applications specially in Vue js
install the package via composer
composer require tohidplus/laravel-vue-translationIn the config/app.php file add the service provider
'providers' => [
//
Tohidplus\Translation\TranslationServiceProvider::class,
//
];Publish the package assets by running the command
php artisan vendor:publish --provider="Tohidplus\Translation\TranslationServiceProvider"This will publish the Translation.js file in resources/js/VueTranslation directory
Run the artisan command
php artisan VueTranslation:generate --watch=1This will compile down all the translation files in the resources/lang directory in the file resources/js/VueTranslation/translations.json
Open the file resources/js/app.js and add the Translation helper
window.Vue = require('vue');
// If you want to add to window object
window.tranlate=require('./VueTranslation/Translation').default.translate;
// If you want to use it in your vue components
Vue.prototype.translate=require('./VueTranslation/Translation').default.translate;Compile the assets by running the command
npm run development
// or watch or productionThis will get the current language form the document lang attribute
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
</body>
</html>Imagine this is the directory structure of resources/lang
|--en |--auth.php |--pagination.php |--passwords.php |--validation.php |--messages.php |--fr |--auth.php |--pagination.php |--passwords.php |--validation.php |--messages.php
And the messages.php file is something like
return [
'foo'=>[
'bar'=>'Some message'
]
];You can get the value by calling the translate method
translate('messages.foo.bar')Example in Vue component
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
{{translate('messages.foo.bar')}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
}
</script>It's not recommended to use this package for showing validation errors but if you want you can replace :attribute, :size etc by passing the second argument as an object.
translate('validation.required',{
attribute:translate('validation.attributes.title')
});Notice: if it could not find the value for the key you passed it will return the exact key