feat: nuxtjs i18n (#94)

* feat: nuxtjs i18n

* fix: select language

nuxt.config.ts

@@ -1,4 +1,3 @@
-import { defineNuxtConfig } from 'nuxt'
 import presetIcons from '@unocss/preset-icons'
 
 export default defineNuxtConfig({
@@ -10,7 +9,7 @@ export default defineNuxtConfig({
     '@pinia/nuxt',
     // unocss plugin - https://github.com/unocss/unocss
     '@unocss/nuxt',
-    '@intlify/nuxt3',
+    '@nuxtjs/i18n',
     '@nuxtjs/color-mode',
     // https://github.com/huntersofbook/huntersofbook/tree/main/packages/naive-ui-nuxt
     '@huntersofbook/naive-ui-nuxt',
@@ -34,21 +33,36 @@ export default defineNuxtConfig({
   },
 
   // localization - i18n config
-  intlify: {
-    localeDir: 'locales',
+  i18n: {
+    locales: [
+      {
+        code: 'en',
+        file: 'en-US.json',
+      },
+      { code: 'tr', file: 'tr-TR.json' },
+    ],
+    defaultLocale: 'tr',
+    lazy: true,
+    langDir: 'locales/',
+    strategy: 'prefix_except_default',
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'i18n_redirected',
+      redirectOn: 'root', // recommended
+    },
     vueI18n: {
-      locale: 'en-US',
-      fallbackLocale: 'en-US',
-      availableLocales: ['en-US', 'tr-TR'],
-      sync: true,
+      legacy: false,
+      locale: 'tr',
+      fallbackLocale: 'tr',
+      availableLocales: ['en', 'tr'],
     },
   },
 
   typescript: {
     tsConfig: {
       compilerOptions: {
         strict: true,
-        types: ['@pinia/nuxt', '@intlify/nuxt3', './type.d.ts'],
+        types: ['@pinia/nuxt', './type.d.ts'],
       },
     },
   },

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@headlessui/vue": "1.7.2",
     "@huntersofbook/naive-ui-nuxt": "0.2.6",
+    "@nuxtjs/i18n": "8.0.0-alpha.2",
     "@pinia/nuxt": "0.4.2",
     "@tailwindcss/aspect-ratio": "0.4.2",
     "@tailwindcss/forms": "0.5.3",
@@ -28,7 +29,6 @@
     "@iconify-json/ic": "1.1.9",
     "@iconify-json/ph": "1.1.2",
     "@iconify-json/twemoji": "1.1.5",
-    "@intlify/nuxt3": "0.2.4",
     "@nuxtjs/color-mode": "3.1.6",
     "@nuxtjs/tailwindcss": "5.3.3",
     "@unocss/nuxt": "0.45.22",

src/components/tem/LanguageChange.vue

@@ -3,29 +3,29 @@ import {
   Listbox,
   ListboxButton,
   ListboxLabel,
-  ListboxOption,
   ListboxOptions,
 } from '@headlessui/vue'
 import { useI18n } from 'vue-i18n'
 import { availableLocales } from '~/locales/availableLocales'
 
+const switchLocalePath = useSwitchLocalePath()
+
 const { locale } = useI18n()
 
-const localeUserSetting = useCookie('locale')
-watch(localeUserSetting, () => {
-  locale.value = localeUserSetting.value
+const local = computed(() => {
+  return locale.value
 })
 </script>
 
 <template>
   <div>
     <Listbox
-      v-model="localeUserSetting"
+      v-model="local"
       as="div"
       class="relative flex items-center"
     >
       <ListboxLabel class="sr-only">
-        Theme
+        Change Language
       </ListboxLabel>
       <ListboxButton type="button" title="Change Language">
         <div
@@ -37,16 +37,16 @@ watch(localeUserSetting, () => {
       <ListboxOptions
         class="absolute top-full right-0 z-[999] mt-2 w-40 overflow-hidden rounded-lg bg-white text-sm font-semibold text-gray-700 shadow-lg shadow-gray-300 outline-none dark:bg-gray-800 dark:text-white dark:shadow-gray-500 dark:ring-0"
       >
-        <ListboxOption
+        <NuxtLink
           v-for="lang in availableLocales"
           :key="lang.iso"
-          :value="lang.iso"
+          :to="switchLocalePath(lang.iso)"
           class="flex w-full cursor-pointer items-center justify-between py-2 px-3"
           :class="{
             'text-white-500 bg-gray-200 dark:bg-gray-500/50':
-              localeUserSetting === lang.iso,
+              local === lang.iso,
             'hover:bg-gray-200 dark:hover:bg-gray-700/30':
-              localeUserSetting !== lang.iso,
+              local !== lang.iso,
           }"
         >
           <span class="truncate">
@@ -55,7 +55,7 @@ watch(localeUserSetting, () => {
           <span class="flex items-center justify-center text-sm">
             <UnoIcon :class="lang.flag" class="text-base" />
           </span>
-        </ListboxOption>
+        </NuxtLink>
       </ListboxOptions>
     </Listbox>
   </div>

src/locales/availableLocales.ts

@@ -9,12 +9,12 @@ export interface ILocales {
 export const availableLocales: ILocales = {
   en: {
     name: 'English',
-    iso: 'en-US',
+    iso: 'en',
     flag: 'i-twemoji-flag-us-outlying-islands',
   },
   tr: {
     name: 'Turkce',
-    iso: 'tr-TR',
+    iso: 'tr',
     flag: 'i-twemoji-flag-turkey',
   },
 }

src/utils/initApp.ts

@@ -1,9 +1,3 @@
-import { languageController } from './languageController'
-
 export function InitApp() {
-  const language = languageController()
 
-  return {
-    language,
-  }
 }

type.d.ts

@@ -1,13 +1,4 @@
-import { IntlifyModuleOptions } from "@intlify/nuxt3";
-
 import en from "./src/locales/en-US.json";
-
-declare module "@nuxt/schema" {
-  interface NuxtConfig {
-    intlify?: IntlifyModuleOptions;
-  }
-}
-
 type MessageSchema = typeof en;
 
 declare module "vue-i18n" {