Localization for Starter Kits #54773

mergehez · 2025-02-24T18:43:43Z

mergehez
Feb 24, 2025

Hi everyone,

I just tried new starter kits and noticed that there is no built-in support for localization. If you create a website in another language or in multiple languages you have to search for texts in all components and update them all.

for example the vue starter kit's `VerifyEmail´ component looks like this:

<script setup lang="ts">
// ...
</script>

<template>
    <AuthLayout title="Verify email" description="Please verify your email address by clicking on the link we just emailed to you.">
        <Head title="Email verification" />

        <div v-if="status === 'verification-link-sent'" class="mb-4 text-center text-sm font-medium text-green-600">
            A new verification link has been sent to the email address you provided during registration.
        </div>

        <form @submit.prevent="submit" class="space-y-6 text-center">
            <Button :disabled="form.processing" variant="secondary">
                <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
                Resend verification email
            </Button>

            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> Log out </TextLink>
        </form>
    </AuthLayout>
</template>

To make the site multilingual you have to replace all texts with keys and add : to attributes everywhere.

I would like to propose a change to handling texts. Instead of writing texts hard coded in the components, define them all in a file using keys and use the keys in the components. After changes VerifyEmail component would look like this:

<script setup lang="ts">
import { __ } from '@/translations';
// ...
</script>

<template>
    <AuthLayout :title="__('verify_email')" :description="__('verify_email_from_email_button')">
        <Head :title="__('email_verification')" />

        <div v-if="status === 'verification-link-sent'" class="mb-4 text-center text-sm font-medium text-green-600">
            {{ __('new_verification_link_sent_to_email') }}
        </div>

        <form @submit.prevent="submit" class="space-y-6 text-center">
            <Button :disabled="form.processing" variant="secondary">
                <LoaderCircle v-if="form.processing" class="h-4 w-4 animate-spin" />
                {{ __('resend_verification_email') }}
            </Button>

            <TextLink :href="route('logout')" method="post" as="button" class="mx-auto block text-sm"> {{ __('log_out') }} </TextLink>
        </form>
    </AuthLayout>
</template>

and here translations.ts file:

export const translations = {
    verify_email: 'Verify email',
    email_verification: 'Email verification',
    verify_email_from_email_button: 'Please verify your email address by clicking on the link we just emailed to you.',
    new_verification_link_sent_to_email: 'A new verification link has been sent to the email address you provided during registration.',
    resend_verification_email: 'Resend verification email',
    log_out: 'Log out',
} as const;

type TranslationKey = keyof typeof translations & string;

export const __ = (key: TranslationKey, replace?: Record<string, string | number>) => {
    if (!(key in translations)) {
        return key;
    }
    let res = translations[key] as string;

    if (replace) {
        for (const k in replace) {
            res = res.replace(`:${k}`, replace[k] as string);
        }
    }

    return res;
};

if I want to add german support, all I have to do is to modify this file. No need to modify all components.

import { ref } from 'vue';

export const translations = {
    verify_email: {
        en: 'Verify email',
        de: 'Email verifizieren'
    },
    email_verification: {
        en: 'Email verification',
        de: 'Email verifizierung'
    },
    // ...
} as const;

type TranslationKey = keyof typeof translations & string;

const currentLocale = ref('en');

export const __ = (key: TranslationKey, replace?: Record<string, string | number>) => {
    if (!(key in translations)) {
        return key;
    }
    const translation = translations[key];
    if(!(currentLocale.value in translation)){
        return key;
    }
    
    let res = translation[currentLocale.value];

    if (replace) {
        for (const k in replace) {
            res = res.replace(`:${k}`, replace[k].toString());
        }
    }

    return res;
};

Results:

you can easily update the existing translations.
it provides autocomplete
it is git friendly. (e.g. translations.ts: add german support)
you can very easily add new translations
as it is a global place,
- you can find unused keys by adding some extra code
- you can change the whole concept of localization. Like reading them from a json file or from inertia's page object
some people will probably create gists of this file for different languages. you'd only need to copy-paste it.

Looking forward to hearing your thoughts!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Localization for Starter Kits #54773

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

Localization for Starter Kits #54773

mergehez Feb 24, 2025

Replies: 0 comments

mergehez
Feb 24, 2025