How to use vue-i18n in a ts file?

Using Vue I18n in TypeScript files primarily involves several steps: configuration, initialization, usage, and type declaration. Below, I'll detail each step to ensure you can seamlessly implement internationalization in your Vue project.

Step 1: Installation and Configuration

First, ensure you have installed vue-i18n. If not, install it using npm or yarn:

bash
npm install vue-i18n

or:

bash
yarn add vue-i18n

Step 2: Initialize Vue I18n

In TypeScript files, create an i18n instance and define types to ensure type safety and improve development experience. First, create an i18n.ts file in your project:

typescript
// i18n.ts
import Vue from 'vue';
import VueI18n from 'vue-i18n';

// Register VueI18n
Vue.use(VueI18n);

// Define message content and configurations
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
};

// Create i18n instance
const i18n = new VueI18n({
  locale: 'en', // Set default language
  fallbackLocale: 'en', // Set fallback language
  messages, // Set message packages
});

export default i18n;

Step 3: Using in Vue Components

Using Vue I18n in Vue components is straightforward. First, inject the i18n instance into your Vue root instance:

typescript
// main.ts
import Vue from 'vue';
import App from './App.vue';
import i18n from './i18n';

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

Then, reference translated strings in components using the $t function:

vue
<template>
  <div>
    {{ $t('message.hello') }}
  </div>
</template>

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

export default Vue.extend({
  name: 'HelloWorld'
});
</script>

Step 4: Type Declarations and Enhancement

To enhance TypeScript type support, add VueI18n type declarations in vue-shim.d.ts:

typescript
import Vue from 'vue';
import VueI18n from 'vue-i18n';

declare module 'vue/types/vue' {
  interface Vue {
    $i18n: VueI18n;
    $t: typeof VueI18n.prototype.t;
  }
}

This enables you to use Vue I18n more safely and comfortably within TypeScript.

Summary

Implementing internationalization with Vue I18n in TypeScript files involves installation and configuration, initializing the i18n instance, using it in Vue components, and enhancing TypeScript type support. This ensures your application can easily localize while maintaining code robustness and maintainability.