How to use Lang.js with Inertia?

Hi Guys!

For my current project (Laravel 9, Jetstream, Inertia, Vue) I am trying to setup localization. https://github.com/rmariuzzo/Laravel-JS-Localization has been recommended a couple of times in this forum. I installed it, symlinked /resources/lang to /lang and created the message.js in my public folder.

I am pretty clueless how to get the Lang.js working with Inertia. Any Ideas? Can someone provide me an example?

Sinnbeck

4 years ago

Level 102

Did you follow the docs? https://github.com/rmariuzzo/Lang.js/

Which part are you struggling with? Just ignore inertia. It's just plain Javascript

1 like

abdosaeedelhassan

4 years ago

Level 29

Hi, i suggest using shared data without need to include additional package, you can follow next post to get the idea https://devonmather.dev/posts/localizing-a-laravel-app-using-vuejs-and-inertiajs-without-any-dependencies

1 like

terlebach

4 years ago

Level 6

Hello @sinnbeck !

I thought so too and this was my first approach.

I've put <script src="/messages.js"></script> in the head area of my app.blade.js.

But when I try to use Lang.get('auth.failed') in my vue template I am getting the error. TypeError: Cannot read properties of undefined (reading 'get')

I found out, that I can use Lang in the script area of my vue file. I could do something like this const lang = Lang; to make Lang accessible to the template but I would rather define Lang globally.

I feel like I am missing something or doing completely wrong or misunderstanding some concepts. Can you give me a push in the right direction? ;D

Sinnbeck

4 years ago

Level 102

@terlebach I personally use react, so I don't know much about vue sadly. But I have made helper methods to use the same syntax as blade. Want me to share?

terlebach

4 years ago

Level 6

@Sinnbeck That would be awesome :) Thank you!

kaiserkais

3 years ago

Level 2

@Sinnbeck sir can you please how can i do it with react . i can't find out

terlebach

4 years ago

Level 6

Hi @abdosaeedelhassan ,

thank you! I tried that too but this approach but it only takes the json file and not the php files. Sure...I could extend this but I thought when there is a more state of the art package that would take out some of the hassle.

terlebach

4 years ago

Level 6

Its seems that I might need a more custom solution because rmariuzzo/Laravel-JS-Localization doesn't seem to support nWidart/laravel-modules.

terlebach

4 years ago

Level 6

I found a working solution for me :)

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        const coiApp = createApp({ render: () => h(app, props) });

        coiApp.config.globalProperties.$lang = Lang;

        coiApp
            .use(plugin)
            .component('InertiaLink', Link)
            .mixin({ methods: { route } })
            .mount(el);

        return coiApp;
    },
});

I am defining the Lang function as a global Property and can access it in the templates like this: $lang.get('auth.failed')

Thanks a lot for your help! :)

1 like

Please or to participate in this conversation.