Guide to load Lang from database or external files

[ekpono]

I have a Laravel Vue application, the application is hosted on Vapor.

The admin can update the language files but since Vapor is serverless, I cant write to update the lang/ folder.

My question is, how do I either write to external storage system that stores my lang folder (e.g s3) or use database to store the language key pair?

[xiCO2k]

Hey @ekpono, we may need a way to fetch a lang file from a 3rd party url, that way it will work for you.

[ekpono]

@xiCO2k Any ideas on how to fetch the lang file from a 3rd party url?

[xiCO2k]

I don't it works out a box, It looks like a cool new feature for the package.

[ekpono]

I made a work around using this

In my app.js I only ran the setup after the language has been resolve.

The api returns a key pair e.g

home.welcome_message: 'Welcome back'
...

setup ({ el, app, props, plugin }) {
    axios.get('/user/language/translation').then(res => {
    return createApp({ render: () => h(app, props) })
        .use(plugin)
        .use(i18nVue, {
            resolve: lang => {
                let key = 'lang_php_'+lang
                return res.data[key]
            }
        })
        .mount(el)
    })
  }

And then in my vue files i did $t('home.welcome_message')

This is just temporary solution, if anyone has a better way to resolve an api lang from the backend, please let me know

[xiCO2k]

That is awesome, I will try to find some time to add that capability to the package.

PS: If anyone wants to PR that, are more than welcome.

[ekpono]

Hi @xiCO2k

Thank you for always being available.

I wish I had experience writing or adding features to packages, I would have made PR 😭

[xiCO2k]

you can try, and any question you can ask me ;)

[dinotek-jr]

There have not been updates to this in a while, but I just referenced this while getting the initial stages of a project up with localization on Vapor. I thought it might be helpful to add a comment on this now.

Vite on vapor auto-references the language files

The lang files get built by Vite into the public/assets folder, and Vapor deploys those to the Cloudfront location. When using Vite with vapor, you do not need to do anything to reference these files as Vapor updates the locations internally during execution/build.

This app.js code will load those Vapor deployed lang files without you needing to do anything:

//Inside app.js
//     In my case, the lang files are located at /resources/lang
//      The app.js files is located at /resources/js/app.js

  return createApp({ render: () => h(app, props) })
      .use(i18nVue, {
          resolve: lang => {
             return import(`../lang/${lang}.json`);
          }
      })
      .mount(el)
  })

[xiCO2k]

Thanks for that @dinotek-jr.

Will close the issue.