はじめに
CDNで単一ファイルコンポーネントを作成する方法はこちらで紹介しました。
これに追加で、CDN版i18nを用いて多言語対応する方法をご紹介します。
結論
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TITLE</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-i18n@9"></script>
<script src="https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"></script>
</script>
</head>
<body>
<div id="app"></div>
<script>
+ //i18n初期設定
+ const i18n = VueI18n.createI18n({
+ legacy: false,
+ locale: navigator.language,
+ fallbackLocale: "en",
+ });
//vue3-sfc-loader初期設定
const options = {
moduleCache: {
vue: Vue
},
//read subdirectory vue component file.
async getFile(url) {
const res = await fetch(url);
if ( !res.ok )
throw Object.assign(new Error(res.statusText + ' ' + url), { res });
return {
getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
}
},
addStyle(textContent) {
const style = Object.assign(document.createElement('style'), { textContent });
const ref = document.head.getElementsByTagName('style')[0] || null;
document.head.insertBefore(style, ref);
},
+ //<i18n>タグの読み込み
+ customBlockHandler(block, filename, options) {
+
+ if ( block.type !== 'i18n' )
+ return
+
+ const messages = JSON.parse(block.content);
+ for ( let locale in messages )
+ i18n.global.mergeLocaleMessage(locale, messages[locale]);
+ }
}
const { loadModule } = window["vue3-sfc-loader"];
//Appコンポーネントをマウント
const app = Vue.createApp(
Vue.defineAsyncComponent(
() => loadModule("./src/components/App.vue", options)
),
)
app.use(i18n);
app.mount('#app');
</script>
</body>
</html>
App.vue
<template>
+ {{ t("example.explain") }}
</template>
<script>
export default Vue.defineComponent({
name: 'App',
components: {
},
+ setup() {
+ //set up i18n
+ const { t } = VueI18n.useI18n()
+ return { t }
+ },
})
</script>
+<i18n>
+ {
+ "en": {
+ "example": {
+ "explain": "This is how you use i18n"
+ }
+ }
+ "ja": {
+ "example": {
+ "explain": "こうやってi18nを使います"
+ }
+ }
+ }
+</i18n>
言語選択コンポーネントが欲しいならこちらをお使いください。
LanguageSelection.vue
<template>
<select v-model="$i18n.locale">
<option value="en">English</option>
<option value="ja">日本語</option>
</select>
</template>
<script>
export default {
name: 'LanguageSelection'
}
</script>
解説
-
i18nのCDN版を用いています。
-
index.htmlの処理はメンドウなのでテンプレートと理解して大丈夫だと思います。 -
.vueファイルに、<i18n>タグとして、json形式で翻訳情報を書き込みます。
HTML上に表示するには、{{t("PATH")}}のように書き込みます。 -
i18nの言語設定の変数は
i18n.global.locale.valueにあります。（i18nはindex.htmlで定義したグローバル変数）もし、テキスト以外に言語設定にレスポンスしたい場合は、computedにこの変数を組み込めば対応できます。