CODEWITHSUNDEEP
laravelvue.js
user6780526
user6780526

Reputation:

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

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>

Upvotes: 0

Views: 1595

Answers (1)

Trevor V
Trevor V

Reputation: 2141

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();
});

Upvotes: 0

Related Questions