Using Laravel and Nuxt Translation Packages

Regarding the use of the Laravel translation package...
The translation package I made before was quite inadequate, and just not very good..

So I was going to make a new one, but with time already running this late, I wondered if I really needed to make it myself..

So I decided to just use a package..
https://github.com/joedixon/laravel-translation
https://github.com/barryvdh/laravel-translation-manager

I was going to choose one of the two, but I just chose the latter... The former is clean, but
the reason I chose the latter was that Laravel translation packages seemed to get discontinued midway more often than I expected..
Actually, I do feel like the latter has also been discontinued, though..

Since I was only going to use the translation package in the dev environment,

composer require --dev barryvdh/laravel-translation-manager
composer require --dev martinlindhe/laravel-vue-i18n-generator

I installed them with...
And I was planning to apply Vue i18n to nuxt.js, and as it happened...
https://www.larablocks.com/package/martinlindhe/laravel-vue-i18n-generator
I found this...
With this, after creating translation files in Laravel, you can convert the translation files into JS files..
Then you just put those JS files on the frontend..
But... that's where a problem arose with Nuxt-i18n...

Using Nuxt-i18n#

https://nuxt-community.github.io/nuxt-i18n/
I ended up using it..

This has more issues than I expected... Or should I call them issues.. Well... there aren't any major problems, but..
The issue is that when you navigate using a path in $rotue.push, params aren't passed..
But with Nuxt-i18n, localePath is supported as a path..

In that case, I need to navigate by Name, but I can't...
How am I supposed to pass the data..

https://router.vuejs.org/guide/essentials/navigation.html

As you can see here, params can't be passed with a path...
So I just used a workaround.. Since this isn't something intentionally provided by route.. I don't think it's actually the right way to do it.. Still, I have to pass the data somehow, so what else can I do..

I think the right way is simply to put it in the store and then push... (Hmm hmm hmm....)

Now, let's get started..#

  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      // alwaysRedirect: true,
      // fallbackLocale: 'en'
    },
    seo: true,
    locales: [
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        css: 'flag-icon-us',
        file: "en.js"
      },
      {
        code: 'ko',
        iso: 'ko',
        name: '한국어',
        css: 'flag-icon-kr',
        file: "ko.js"
      },
      {
        code: 'ja',
        iso: 'ja',
        name: '日本',
        css: 'flag-icon-jp',
        file: "ja.js"
      }
    ],
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en',
    },
    lazy: true,
    langDir: 'lang/',
  },

I set up nuxt i18n roughly like this..

There aren't that many languages, but I thought it would be better to split them into separate files, so I did it that way..
In practice, it does get set according to the browser's language.. It loads en and ko at the same time, and then if you select another language, it loads that language.

First... since I need to write the translations in Laravel using the translation package...
https://github.com/caouecs/Laravel-lang
I downloaded en, ko, and ja from these and added them..

Now I have to work through them one by one..
Once I finish the work on the Laravel translation page, I export the files as JS..

php artisan vue-i18n:generate --multi-locales

After running the command and converting them to en.js, ko.js, and ja.js.. I then move them back to the frontend.. I'm now adding translations to the frontends I've worked so hard on..

Problems encountered when opening an Auth verification link..#

The Auth verification link is created on the backend and sent by email..
domain/auth/JDJ5JDEwJGtLQmxmSkprTy95VWRkd1gzQU55V08vS2RLU29kLnlEOWI3NzU1YjYwLzZaRDh6dmtOVVF1

However, following this link takes you to the en version.. But if you open it in a brand-new Chrome Incognito window with no data, it automatically switches to ko to match the browser and then redirects you..
But if you access it when you already have a cookie set to ko, it simply recognizes it as an en URL and displays it in en, causing a problem..

I did talk about this issue, but, hmm... When you access the auth page for the first time, it automatically sets the language to the browser language, but the second visit is the problem. Setting alwaysRedirect: true here causes another problem...

I was told it would be better to check the cookie value on the auth page and redirect based on it, so instead, I think I'll make something myself to redirect based on the cookie value...

What's left now...#

It seems like the translation work is going pretty well, more or less..
- apply translations to the frontend..
- apply translations to vee-validate..
- send the language setting in the header when calling the API with axios..
- create Laravel middleware that sets the language based on the header value..
- display translations on the backend based on the language setting..
- change route pushes to pass data using the store..
- redirect based on the cookie language when opening an auth verification link..

Once I get this far..... I think the translation work will be done..
Once that's done.. I need to develop image uploading, management, and display with Laravel..

I'm going on a trip to Singapore tomorrow..... When... am... I ever going to get all this done..

Using Nuxt-i18n#

Now, let's get started..#

Problems encountered when opening an Auth verification link..#

What's left now...#

More posts