Vue

載入翻譯內容

本頁說明 Intor 在 Vue 專案中的翻譯內容載入方式。

Bundled

在 Vue 快速開始中，已示範透過 定義在設定檔中 的方式載入翻譯內容。
本節將說明另一種載入方式：依語系載入 (Dynamic Import) 。


依語系載入 (Dynamic Import)

沿用 Vue 快速開始 的翻譯內容結構。

為了示意不同的載入方式，故暫時移除設定檔中 messages 定義。

intor-config.ts
M
import { defineIntorConfig } from "intor";

export const intorConfig = defineIntorConfig({
  defaultLocale: "en",
  supportedLocales: ["en", "fr"],
  // messages: { en: EN, fr: FR },
});

接著，在 i18n/ 資料夾中建立 load-messages.ts。

load-messages.ts
U

完整實作請參考：依語系載入 (Dynamic Import)


最後，於 intor-client-provider.vue 中使用 useIntor 並傳入對應的載入函式。

intor-client-provider.vue
M
<script setup lang="ts">
import { IntorProvider, useIntor } from "intor/vue";
import { intorConfig } from "./intor-config";
import { loadMessages } from "./load-messages";
const value = useIntor(intorConfig, loadMessages);
</script>

<template>
  <IntorProvider :value="value">
    <slot />
  </IntorProvider>
</template>

useIntor 用於封裝翻譯內容載入與狀態管理流程。

On this page