Add the following import statement to your Vue component:
import { t, myLang } from "@/path/to/your/i18n";
To translate a text, you can use Vue's template syntax:
<template>
<p>{{ t('en', 'welcome.hi') }}</p>
</template>
To change the locale, you can use a select dropdown in your component like so:
<template>
<select v-model="currentLocale">
<option v-for="lang in availableLocales" :key="lang" :value="lang">{{ lang }}</option>
</select>
</template>
<script setup>
import { ref } from "vue";
const currentLocale = ref('en');
const availableLocales = Object.keys(myLang);
</script>
Here's a complete example using Vue's script setup and Composition API:
<template>
<select v-model="currentLocale">
<option v-for="lang in availableLocales" :key="lang" :value="lang">{{ lang }}</option>
</select>
<p>{{ t(currentLocale, 'welcome.hi') }}</p>
</template>
<script setup>
import { ref } from "vue";
import { t, myLang } from "@/path/to/your/i18n";
const currentLocale = ref('en');
const availableLocales = Object.keys(myLang);
</script>
Add the following import statement to your Svelte file:
import { t, locale, locales } from '$lib/locales/i18n';
To translate a text, use Svelte's reactive statements:
<p>{$t('welcome.hi')}</p>
To change the locale, use a select dropdown. Bind the locale to it.
<select bind:value={$locale}>
{#each $locales as lang}
<option value={lang}>{lang}</option>
{/each}
</select>
Here's a complete example in a single Svelte file, integrating all the steps:
<script>
import { t, locale, locales } from '$lib/locales/i18n';
</script>
<select bind:value={$locale}>
{#each $locales as lang}
<option value={lang}>{lang}</option>
{/each}
</select>
<p>{$t('welcome.hi')}</p>