I want to use a language selector with vuejs3 and inertia.
I don't understand why it doesn't update my current_locale
I have try with inertia link but anything.
HandleInertiaRequests.php
public function share(Request $request): array
{
return array_merge(parent::share($request), [
...
'ziggy' => function () use ($request) {
return array_merge((new Ziggy)->toArray(), [
'location' => $request->url(),
'current_locale' => fn () => app()->getLocale(),
]);
},
'current_locale' => app()->getLocale(),
'available_locales' => config('app.available_locales'),
'default_locale' => config('app.locale', 'fr'),
...
]);
}
SelectLanguageController.php
public function setLocale(SetLocaleRequest $request): RedirectResponse
{
$locale = $request->validated('locale');
App::setLocale($locale);
Session()->put('locale', $locale);
Inertia::share('current_locale', $locale);
return redirect()->back();
}
My languageSelector in vue
<template>
<span v-for="locale in props.availableLocales"
:key="`available-locale-${locale}`"
class="navbar-header__content__languages__item animation text-md "
:class="props.currentLocale === locale && 'active'"
@click="setLocale(locale)"
>
{{ locale }}
</span>
</template>
<script setup>
import ...
let props = defineProps({
availableLocales: {required: true, type: Array},
currentLocale: {required: true, type: String}
})
let setLocale = (locale) => {
Inertia.put(route('front.set-locale'), {
'locale': locale
},
{
onSuccess: () => {
Inertia.visit(route('front.home'));
}
})
}
</script>
web.php
Route::name('front.')->group(function () {
Route::put('/select-locale', [SelectLanguageController::class, 'setLocale'])
->name('set-locale');
});