i18n.md

Localization (i18n)

Keys

In contrast to regular i18n solutions, vuechain only stores unobstrusive localization keys in your code that are local to the component or the code file, you are localizing.

Keep in mind, that vuechain automatically manages the localization keys for you during development. You should npm start while editing and use an editor that automatically refreshes a file from disk on change like Visual Studio Code. If you leave out a localization key, vuechain will automatically assign one when running in the background.

Configuration

In order to use i18n, you have to configure a locale on application startup.

bootstrap({
	async start(app: Vue) {
		// Load and use a specific locale:
		await app.$i18x.changeLocale("en");

		// Autodetect a supported locale:
		await app.$i18x.changeLocaleAuto(["en", "de"]);
	}
})

More information on the vuechain bootstrapper can be found here

Once your application is loaded, you can start prefetching other supported locales..

await $i18x.prefetchLocale("de");

..or change the locale on demand:

await $i18x.changeLocale("de");

Note that the $i18x object extends the vue-i18n plugin.

Vue Components

Vue components are automatically localized and a prefix is injected into the component instance at runtime.

<template>
	<div>
		<div v-x="0">Hello World!</div>
		<div v-x="[1, { name: 'World' }]">Hello {name}!</div>

		<div>{{ fromCode }}</div>
		<div>{{ fromCodeWithInterpolation }}</div>
	</div>
</template>

<script lang="ts">
	import Vue from "vue";

	export default Vue.extend({
		computed: {
			fromCode() {
				return this.$x(2, "Hello World!");
			},
			fromCodeWithInterpolation() {
				return this.$x(3, "Hello {name}!", { name: "World" });
			}
		}
	});
</script>

TS/JS Files

Localizing non-vue components will also be supported in the future, but you will need access to the $i18x instance.