15 - Internationalization App Development

Duration: 10 minutes

Video Info

• Title: Internationalization App Development
• Series: Practical
• Level: Intermediate
• Prerequisites: i18n basics

Chapters

1. i18n System Configuration (2 min)
2. Language Switching (2 min)
3. Timezone & Locale Formatting (3 min)
4. Directive Message i18n (3 min)

Detailed Script

Opening (0:00-0:10)

Today we learn how to use Directix's i18n features to build multilingual applications.

Chapter 1: i18n Configuration (0:10-2:10)

Visual: VS Code demo

Setup and Configuration:

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import Directix, { createI18n, setLocale } from 'directix'
import { zhCN, enUS, jaJP } from 'directix'

const i18n = createI18n({
  locale: 'en-US',
  fallbackLocale: 'en-US',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP
  }
})

const app = createApp(App)
app.use(Directix)
app.mount('#app')

// Auto-set based on browser language
const browserLocale = navigator.language
if (['zh-CN', 'zh', 'zh-Hans'].includes(browserLocale)) {
  setLocale('zh-CN')
} else if (browserLocale.startsWith('ja')) {
  setLocale('ja-JP')
} else {
  setLocale('en-US')
}

Chapter 2: Language Switching (2:10-4:10)

Visual: Language switch effect

Language Switcher Component:

<template>
  <div class="language-switcher">
    <select v-model="currentLocale" @change="changeLocale">
      <option value="zh-CN">中文</option>
      <option value="en-US">English</option>
      <option value="ja-JP">日本語</option>
    </select>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { setLocale, getLocale, t } from 'directix'

const currentLocale = ref(getLocale())

const changeLocale = () => {
  setLocale(currentLocale.value)
  // Update HTML lang attribute
  document.documentElement.lang = currentLocale.value
}

// Watch language changes
watch(currentLocale, () => {
  console.log('Language changed:', currentLocale.value)
})
</script>

Using Translations:

<template>
  <div>
    <h1>{{ t('directives.debounce.description') }}</h1>
    <p>{{ t('errors.invalid_param') }}</p>
  </div>
</template>

<script setup>
import { t } from 'directix'
</script>

Chapter 3: Timezone & Locale Formatting (4:10-7:10)

Visual: Formatting effects

Get Timezone Info:

<script setup>
import { getTimezoneInfo, detectLocaleInfo } from 'directix'

const tz = getTimezoneInfo()
// { id: 'Asia/Shanghai', offset: 8, offsetString: '+08:00', isDST: false, name: 'Shanghai' }

const locale = detectLocaleInfo()
// { locale: 'zh-CN', language: 'zh', region: 'CN', timezone: 'Asia/Shanghai' }
</script>

Locale-specific Date Formatting:

<template>
  <div>
    <p>Date: {{ formattedDate }}</p>
    <p>Number: {{ formattedNumber }}</p>
    <p>Price: {{ formattedPrice }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { formatDateLocale, formatNumberLocale, formatCurrencyLocale, getLocale } from 'directix'

const date = ref(new Date())
const number = ref(1234567.89)
const price = ref(99.99)

const formattedDate = computed(() => formatDateLocale(date.value))
const formattedNumber = computed(() => formatNumberLocale(number.value))
const formattedPrice = computed(() => formatCurrencyLocale(price.value))
</script>

Supported Locale Formats:

Region	Date Format	Number Separator	Currency Symbol
CN	YYYY-MM-DD	1,234.56	¥
US	MM/DD/YYYY	1,234.56	$
JP	YYYY/MM/DD	1,234.56	¥
DE	DD.MM.YYYY	1.234,56	€

Chapter 4: Directive Message i18n (7:10-10:00)

Visual: Error messages

Warning System i18n:

import { setWarningI18n, directiveWarn } from 'directix'
import { t } from 'directix'

// Connect warning system to i18n
setWarningI18n(t)

// Now warnings use translated messages
directiveWarn('debounce', 'errors.invalid_wait', { wait: -100 })
// Output: [Directix] v-debounce: Invalid wait parameter, must be positive

Custom Translations:

import { createI18n, type I18nMessages } from 'directix'

const customEnUS: I18nMessages = {
  ...enUS,
  directives: {
    ...enUS.directives,
    myDirective: {
      description: 'My custom directive',
      errors: {
        invalid_value: 'Invalid value'
      }
    }
  }
}

Summary

Today we learned:

• i18n system configuration
• Language switching
• Timezone and locale formatting
• Directive message internationalization

This concludes our tutorial series. Thanks for watching!

Exercises

1. Create a language switcher supporting Chinese, English, and Japanese
2. Implement a time display component showing local time based on user timezone
3. Add multilingual error messages for custom directive

Resources

• i18n Documentation
• Timezone Utils API