Vue

Message Loading

This page explains how Message Loading is handled in a Vue project.

Bundled

In the Vue Quick Start, loading translation content by defining it directly in the config is already demonstrated.
This section introduces another bundled loading approach: Per-locale Loading (Dynamic Import) .


Per-locale Loading (Dynamic Import)

This section reuses the same translation content structure from the Vue Quick Start .

To illustrate a different loading approach, the messages definition is temporarily removed from the config.

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

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

Next, create load-messages.ts under the i18n/ directory.

load-messages.ts
U

For the complete implementation, see: Loaded per locale (Dynamic Import)


Finally, update intor-client-provider.vue to use useIntor and pass in the corresponding loading function.

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 encapsulates the translation loading logic and state management.

On this page