Laravel Vuejs - translations store in database along with lang folder translations - laravel

Question

I'm using "vue-i18n": "^7.6.0" on laravel 5.6, vuejs for translating the website into 16 languages.
I have mentioned all the languages in config/app.php and i have created a folder lang in resources/assets/js/lang where i have all the language files (example, en.json, es.json and so on). I have created a dropdown and everything works fine as expected.
Now i need to create Articles table. What im looking for is creating the article in multiple languages and storing in database like
articles (table)
article_languages(id, article_id lang content) something like this
And use these translations along with the main translations i have created with json files. How to achieve this?
ArticleController
<?php
namespace App\Http\Controllers\Articles;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Models\ArticleCategory;
use App\Models\Article;
use App\Models\ArticleTranslation;
class ArticleController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index($language)
{
$articles = Article::withTranslations($language)->get();
return $articles;
}
I've installed this package and followed their instructions
ArtcileComponent
<template>
<div>
<ul>
<li>{ article.title }</li>
<li>{ article.subtitle }</li>
<li>{ article.content }</li>
</ul>
</div>
<template>
<script>
export default {
data: function () {
return {
articles: []
}
},
mounted() {
var app = this;
axios.get('/api/articles/' + self.$i18n.locale + '/')
.then(function (response) {
self.articleText = response.data.article;
})
.catch(function (error) {
console.log(error);
});
}
}
</script>

Answer 1

In Vue you send a get request over to Laravel via an API. The self.$i18n.locale variable holds the library locale.
let self = this;
axios.get('/articles/' + self.$i18n.locale + '/' + article.id)
.then(function (response) {
self.articleText = response.data.article
})
.catch(function (error) {
// Do something with the error
console.log(error)
});
Your Laravel route would look something like this:
use App\AppArticle;
Route::get('articles/{language}/{id}', function ($language, $id) {
return App\ArticleLanguage::where('article_id', $id)->where('lang', $language)->firstOrFail();
});