១. តម្លើង @nuxt/i18n module

តម្លើង CLI Command ខាងក្រោមនៅលើ Terminal សម្រាប់កម្មវិធីរបស់អ្នកដើម្បីប្រើប្រាស់ @nuxtjs/i18n module ។

      npx nuxi@latest module add @nuxtjs/i18n

    

២. បន្ថែម @nuxtjs/i18n module

បន្ថែម '@nuxtjs/i18n' ទៅក្នុង modules នៃឯកសារ nuxt.config.ts ដើម្បីដំណើរការ module ។ ជាទូទៅ nuxt ធ្វើការបន្ថែមចូលដោយស្វ័យប្រវត្តិ តែក្នុងករណីមានភាពមិនប្រក្រតី អ្នកអាចត្រួតពិនិត្យមើល និងបន្ថែមដោយខ្លួនឯងបាន។

      export default defineNuxtConfig({
  modules: ["@nuxtjs/i18n"],
});

    

៣. I18n configuration

បន្ថែម i18n នៅក្នុង nuxt.config.ts ដើម្បីធ្វើការ setup និង config bahavior ផ្សេងៗ ។

      export default defineNuxtConfig({
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', name: 'English', file: 'en.json' },
      { code: 'km', name: 'Khmer', file: 'km.json' },
      ...
    ]
  }
});

    

៤. បង្កើតថតឯកសារ និងឯកសារដែលផ្ទុកទិន្នន័យបកប្រែ

ចំណុចដែលត្រូវចំណាំ និងប្រយ័ត្ន គឺការភាន់ច្រឡំគ្នា ជាន់គ្នា ឬខ្វះខាត strings នៅក្នុងឯកសារផ្ទុកទិន្នន័យភាសានីមួយៗ។ ចំណុចដែលខ្ញុំចង់ recommend គឺធ្វើតែភាសាគោល (default locale) អោយចប់សព្វគ្រប់ និងរួចរាល់ជាមុនសិន សឹមទៅបង្កើត ឬបកប្រែឯកសារនៃភាសាដទៃ។

      en.json
km.json
...

    

      {
  "welcome": "Welcome"
}

    

      {
  "welcome": "សួស្តី"
}

    

៦. បង្កើត component សម្រាប់ប្តូរភាសា

ខាងក្រោមជាកូដឧទាហរណ៍

      <script setup>
const { t, locales, setLocale } = useI18n()
</script>

<template>
  <div>
    <button v-for="locale in locales" @click="setLocale(locale.code)">
      {{ locale.name }}
    </button>
    <h1>{{ t('welcome') }}</h1>
  </div>
</template>

    

៧. ការហៅយកទៅប្រើក្នុងឯកសារផ្សេងៗក្នុងកម្មវិធី

បន្ទាប់ពីបានធ្វើរឿងខាងលើចប់សព្វគ្រប់អស់ហើយ ដូច្នេះនេះគឺជាដំណាក់កាលចុងក្រោយសម្រាប់យកទិន្នន័យភាសា និងមុខងារបកប្រែមកបង្ហាញ និងប្រើប្រាស់នៅលើផ្ទាំងប្រើប្រាស់។ ចំពោះ const { t } = useI18n() អ្នកទាំងអស់គ្នាពុំចាំបាច់ declare ក៏បាន យើងអាចប្រើ {{ $t("...") }} ដោយផ្ទាល់នៅក្នុង <template> បាន។ ដោយឡែកចំពោះ useLocalePath() គឺពុំចាំបាច់ប្រកាសហៅយកមកប្រើគ្រប់ពេលទេ ដរាបណាអ្នកទាំងអស់គ្នាត្រូវការប្រើប្រាស់ <NuxtLink/> ដើម្បីផ្លាស់ពីទំព័រមួយទៅទំព័រមួយផ្សេងទៀត ដែលគួរតែត្រូវបានប្រកាស ដើម្បីចំណាំ និងរក្សាទុកនូវជម្រើសភាសាដែលអ្នកប្រើបានជ្រើសរើស ដើម្បីរក្សាអ្នកប្រើអោយស្ថិតនៅលើ locale តែមួយ និងជៀសវាងការលោតចូល default locale ។ បច្ចុប្បន្ននៅជំនាន់ទី៤ Nuxt បានបង្កើតវិធីមួយទៀត ដោយអនុញ្ញាតឲ្យ developer អាចប្រើប្រាស់ built-in component <NuxtLinkLocale/> ដែល build នៅពីលើ <NuxtLink/> ហើយ ធ្វើការដូចគ្នាទៅនឹង useLocalePath() ដែរ គ្រាន់តែខ្លីជាង ហើយងាយស្រួលជាង។

      <template>
  <NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>

<!-- ត្រូវដូចគ្នា ប្រើមួយណាក៏បាន -->

<script setup>
const localePath = useLocalePath()
</script>

<template>
  <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
</template>

    

📚 ប្រភព និងឯកសារពាក់ព័ន្ធសម្រាប់ស្វែងយល់បន្ថែម

• Documentation
• Nuxt i18n Module