[Wayfinder] how to implement localized routes?

[Baertie]

Hi so i have a laravel project with multiple languages. I use wayfinder in vue for my routes but when i look in my browser i see that when hovering a link i see an url that has no locale in the url.

In my route file we configure the locale prefix like following:

Route::group([
    'prefix' => LaravelLocalization::setLocale(),
    'middleware' => ['localeCookieRedirect', 'localizationRedirect', 'localize']
], function () {
    Route::group(['prefix' => '', 'as' => 'simply.'], function () {
        Route::get(LaravelLocalization::transRoute('routes.simply.faq'), [FaqController::class, 'index'])->name('faq.index');
    });
});

In my Vue i do this (code is trimmed)

<template>
  <div class="grid grid-cols-1 gap-0 md:grid-cols-2">
    <ResultSection
      section-key="faq"
      :section-url="faqIndex().url"
      :results="results.faq"
      class="border-b border-gray-300 lg:border-b-0 lg:border-r"
    />
  </div>
</template>

<script setup>
import { index as faqIndex } from '#js/actions/App/Http/Controllers/Simply/FaqController';
import ResultSection from '#vue/global-search/partials/ResultSection.vue';

const props = defineProps({
  results: {
    type: Object,
    required: true,
  },
});
</script>

Am i doing something wrong in the route file or is it not yet supported in wayfinder because it worked fine with ziggy

[ismaildasci]

Hey, I looked into this issue and checked Wayfinder source code.

The problem: Wayfinder generates static URLs at build time. When you use LaravelLocalization::setLocale() as prefix, it evaluates to a static value (like en or nl) at generation time, not dynamically at runtime. Thats why your URLs dont include the locale prefix - Wayfinder captures whatever locale was active when you ran wayfinder:generate.

Current status: This is a known limitation. Theres an open issue for this: laravel/wayfinder#116 and you also opened laravel/wayfinder#134

Possible workaround: Wayfinder has setUrlDefaults function that can set URL parameters at runtime. But for this to work, your route needs to have {locale} as an actual route parameter, not as a static prefix.

So instead of:

Route::group([
    'prefix' => LaravelLocalization::setLocale(),
    // ...
], function () {
    Route::get('faq', [FaqController::class, 'index']);
});

You would need something like:

Route::group([
    'prefix' => '{locale}',
    // ...
], function () {
    Route::get('faq', [FaqController::class, 'index']);
});

Then in your Vue app entry point:

import { setUrlDefaults } from 'wayfinder';

// Get current locale from page props or meta tag
const locale = document.documentElement.lang || 'en';
setUrlDefaults({ locale });

But honestly: If you need proper i18n routing with mcamara/laravel-localization, Ziggy is still the better option right now. Wayfinder team is aware of this limitation but havent implemented full i18n support yet.

Hope this helps clarify the situation!

[Baertie]

@ismaildasci Thanks for the response! We are indeed reverting to ziggy