Posted 3 months ago by
thomas-danger (@thomas-danger)
@thomas-danger @silvus @tomgobich @thomas-danger @tomgobich

5

1

1,711

Inertia and i18n

Hello,

I want to use the i18n module in an inertia project with react but i can't find a way to use the t('messages.gretting') method in my tsx component…
Is it possible to use this method in inertia like in Edge template ? Or am i forced to pass all my translations as props to my page ?

Join The Discussion! (5 Replies)

Please sign in or sign up for free to join in on the dicussion.

  1. tomgobich
    Adocasts Plus Subscriber
    Commented 3 months ago

    Hey Thomas!

    The i18n module looks tightly coupled to the AdonisJS server, so I don't think this is or will be possible as the server is only in the picture on the initial load and only when using SSR. If you're not using SSR, all rendering takes place in the browser.

    There said, I'm not sure it'd be needed. I'll preface by saying I haven't worked with the i18n module yet, but I have worked with others in an API-based environment. I believe you could complete this with something similar to what I've done in the past:

    1. On non Inertia requests (no X-Inertia header), share the current locale code and that locale's translations with your inertia application and store it on the client (in a composable or store)

      I'd recommend only sharing on non Inertia requests so that you aren't sending it with all requests as these translation files can grow quickly.

    2. When/if the user changes their locale, have this submit a form request using inertia to update the user's locale, and send back an updated locale code and that updated locale's translations to update within your client-side store.

    3. Write your own little helper inside the composable/store that mimics the t method, accepting in the key of the string you're after, finding it from the stored translations, and returning it back.

    Also note, you can reuse types from the i18n package to simplify things for any TypeScript support as well, just remember to use import type rather than just import.

    Looks like there's also an issue on the AdonisJS Inertia repo asking for i18n support. Again, I don't see direct support being something that'll happen, but thought I'd share in case you'd like to follow along or consider any of the options discussed there.

    Hope this helps!

    1

    Please sign in or sign up for free to reply

    1. thomas-danger
      OP
      Commented 3 months ago

      Hey Tom,

      Thanks for the answer !

      I will try both methods, yours and the one in the github issue.

      1

      Please sign in or sign up for free to reply

      1. tomgobich
        Adocasts Plus Subscriber
        Commented 3 months ago

        Anytime!!

        Sounds good, best of luck!! 😊

        1

        Please sign in or sign up for free to reply

      2. silvus
        Adocasts Plus Subscriber
        Commented 3 months ago

        Hello Thomas

        Have you had any methods that have worked for you and do you have an example of a realization?

        Thanks in advance

        0

        Please sign in or sign up for free to reply

        1. thomas-danger
          OP
          Commented 3 months ago

          Hello Silvus,

          I cannot share my work because it's a project for my job, but here is my process:

          1. I pass the i18n instance via Inertia's shared props.

          2. In my controller, I call a service to retrieve the translation file I need, based on the file name.

          3. I share the filtered translations with the page via Inertia.share().

          4. In the frontend (React), I store the translations in a context and recreate a function that mimics the t method, as Tom advised.

          It needs some optimization, but for now, it's working.

          0

          Please sign in or sign up for free to reply