ADD: i18n support

d7facd77 · Alexander Kaschta · dfb00be9 · d7facd77 · d7facd77 · d7facd77
Commit d7facd77 authored 4 days ago by Alexander Kaschta
--- a/package.json
+++ b/package.json
@@ -37,12 +37,14 @@
    "tailwind-merge": "^2.5.5",
    "vee-validate": "^4.14.7",
    "vue": "^3.5.12",
+    "vue-i18n": "^11.1.2",
    "vue-router": "^4.4.5",
    "vue-sonner": "^1.3.0",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@antfu/eslint-config": "^3.11.2",
+    "@intlify/unplugin-vue-i18n": "^6.0.5",
    "@nightwatch/vue": "^3.1.2",
    "@tsconfig/node22": "^22.0.0",
    "@types/jsdom": "^21.1.7",

--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
      vue:
        specifier: ^3.5.12
        version: 3.5.13(typescript@5.6.3)
+      vue-i18n:
+        specifier: ^11.1.2
+        version: 11.1.2(vue@3.5.13(typescript@5.6.3))
      vue-router:
        specifier: ^4.4.5
        version: 4.5.0(vue@3.5.13(typescript@5.6.3))
@@ -69,6 +72,9 @@ importers:
      '@antfu/eslint-config':
        specifier: ^3.11.2
        version: 3.11.2(@typescript-eslint/utils@8.26.1(eslint@9.16.0(jiti@2.4.2))(typescript@5.6.3))(@unocss/eslint-plugin@66.1.0-beta.5(eslint@9.16.0(jiti@2.4.2))(typescript@5.6.3))(@vue/compiler-sfc@3.5.13)(eslint@9.16.0(jiti@2.4.2))(typescript@5.6.3)(vitest@2.1.8)
+      '@intlify/unplugin-vue-i18n':
+        specifier: ^6.0.5
+        version: 6.0.5(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@2.4.2))(rollup@4.28.1)(typescript@5.6.3)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
      '@nightwatch/vue':
        specifier: ^3.1.2
        version: 3.1.2(@types/node@22.10.1)(stylus@0.57.0)(vue@3.5.13(typescript@5.6.3))
@@ -992,6 +998,61 @@ packages:
  '@internationalized/number@3.6.0':
    resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}

+  '@intlify/bundle-utils@10.0.1':
+    resolution: {integrity: sha512-WkaXfSevtpgtUR4t8K2M6lbR7g03mtOxFeh+vXp5KExvPqS12ppaRj1QxzwRuRI5VUto54A22BjKoBMLyHILWQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/core-base@11.1.2':
+    resolution: {integrity: sha512-nmG512G8QOABsserleechwHGZxzKSAlggGf9hQX0nltvSwyKNVuB/4o6iFeG2OnjXK253r8p8eSDOZf8PgFdWw==}
+    engines: {node: '>= 16'}
+
+  '@intlify/message-compiler@11.1.2':
+    resolution: {integrity: sha512-T/xbNDzi+Yv0Qn2Dfz2CWCAJiwNgU5d95EhhAEf4YmOgjCKktpfpiUSmLcBvK1CtLpPQ85AMMQk/2NCcXnNj1g==}
+    engines: {node: '>= 16'}
+
+  '@intlify/shared@11.1.2':
+    resolution: {integrity: sha512-dF2iMMy8P9uKVHV/20LA1ulFLL+MKSbfMiixSmn6fpwqzvix38OIc7ebgnFbBqElvghZCW9ACtzKTGKsTGTWGA==}
+    engines: {node: '>= 16'}
+
+  '@intlify/unplugin-vue-i18n@6.0.5':
+    resolution: {integrity: sha512-0MKaYhLvM46Mtm+OArkK75ztmqaFfhIvnm5mg8XKqCPAKVAK98o+8tB6gUQFkKrF5PMYsNXvyMJCi40cRCDJbA==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      petite-vue-i18n: '*'
+      vue: ^3.2.25
+      vue-i18n: '*'
+    peerDependenciesMeta:
+      petite-vue-i18n:
+        optional: true
+      vue-i18n:
+        optional: true
+
+  '@intlify/vue-i18n-extensions@8.0.0':
+    resolution: {integrity: sha512-w0+70CvTmuqbskWfzeYhn0IXxllr6mU+IeM2MU0M+j9OW64jkrvqY+pYFWrUnIIC9bEdij3NICruicwd5EgUuQ==}
+    engines: {node: '>= 18'}
+    peerDependencies:
+      '@intlify/shared': ^9.0.0 || ^10.0.0 || ^11.0.0
+      '@vue/compiler-dom': ^3.0.0
+      vue: ^3.0.0
+      vue-i18n: ^9.0.0 || ^10.0.0 || ^11.0.0
+    peerDependenciesMeta:
+      '@intlify/shared':
+        optional: true
+      '@vue/compiler-dom':
+        optional: true
+      vue:
+        optional: true
+      vue-i18n:
+        optional: true
+
  '@isaacs/cliui@8.0.2':
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}
@@ -5563,6 +5624,12 @@ packages:
    peerDependencies:
      vue: ^3.4.37

+  vue-i18n@11.1.2:
+    resolution: {integrity: sha512-MfdkdKGUHN+jkkaMT5Zbl4FpRmN7kfelJIwKoUpJ32ONIxdFhzxZiLTVaAXkAwvH3y9GmWpoiwjDqbPIkPIMFA==}
+    engines: {node: '>= 16'}
+    peerDependencies:
+      vue: ^3.0.0
+
  vue-metamorph@3.2.0:
    resolution: {integrity: sha512-dCWwwh7OngblFqUvD/pilS++TVnTHY1Nft2Tp02mHYv8ZrxFHN3NDMOKOoIg8lo7WR3TKxi3+bD/rmnN9tS2yw==}
    hasBin: true
@@ -6537,6 +6604,68 @@ snapshots:
    dependencies:
      '@swc/helpers': 0.5.15

+  '@intlify/bundle-utils@10.0.1(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))':
+    dependencies:
+      '@intlify/message-compiler': 11.1.2
+      '@intlify/shared': 11.1.2
+      acorn: 8.14.0
+      escodegen: 2.1.0
+      estree-walker: 2.0.2
+      jsonc-eslint-parser: 2.4.0
+      mlly: 1.7.4
+      source-map-js: 1.2.1
+      yaml-eslint-parser: 1.2.3
+    optionalDependencies:
+      vue-i18n: 11.1.2(vue@3.5.13(typescript@5.6.3))
+
+  '@intlify/core-base@11.1.2':
+    dependencies:
+      '@intlify/message-compiler': 11.1.2
+      '@intlify/shared': 11.1.2
+
+  '@intlify/message-compiler@11.1.2':
+    dependencies:
+      '@intlify/shared': 11.1.2
+      source-map-js: 1.2.1
+
+  '@intlify/shared@11.1.2': {}
+
+  '@intlify/unplugin-vue-i18n@6.0.5(@vue/compiler-dom@3.5.13)(eslint@9.16.0(jiti@2.4.2))(rollup@4.28.1)(typescript@5.6.3)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.16.0(jiti@2.4.2))
+      '@intlify/bundle-utils': 10.0.1(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))
+      '@intlify/shared': 11.1.2
+      '@intlify/vue-i18n-extensions': 8.0.0(@intlify/shared@11.1.2)(@vue/compiler-dom@3.5.13)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))
+      '@rollup/pluginutils': 5.1.3(rollup@4.28.1)
+      '@typescript-eslint/scope-manager': 8.26.1
+      '@typescript-eslint/typescript-estree': 8.26.1(typescript@5.6.3)
+      debug: 4.4.0
+      fast-glob: 3.3.3
+      js-yaml: 4.1.0
+      json5: 2.2.3
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+      unplugin: 1.16.0
+      vue: 3.5.13(typescript@5.6.3)
+    optionalDependencies:
+      vue-i18n: 11.1.2(vue@3.5.13(typescript@5.6.3))
+    transitivePeerDependencies:
+      - '@vue/compiler-dom'
+      - eslint
+      - rollup
+      - supports-color
+      - typescript
+
+  '@intlify/vue-i18n-extensions@8.0.0(@intlify/shared@11.1.2)(@vue/compiler-dom@3.5.13)(vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)))(vue@3.5.13(typescript@5.6.3))':
+    dependencies:
+      '@babel/parser': 7.26.10
+    optionalDependencies:
+      '@intlify/shared': 11.1.2
+      '@vue/compiler-dom': 3.5.13
+      vue: 3.5.13(typescript@5.6.3)
+      vue-i18n: 11.1.2(vue@3.5.13(typescript@5.6.3))
+
  '@isaacs/cliui@8.0.2':
    dependencies:
      string-width: 5.1.2
@@ -11804,6 +11933,13 @@ snapshots:
    dependencies:
      vue: 3.5.13(typescript@5.6.3)

+  vue-i18n@11.1.2(vue@3.5.13(typescript@5.6.3)):
+    dependencies:
+      '@intlify/core-base': 11.1.2
+      '@intlify/shared': 11.1.2
+      '@vue/devtools-api': 6.6.4
+      vue: 3.5.13(typescript@5.6.3)
+
  vue-metamorph@3.2.0(eslint@9.16.0(jiti@2.4.2)):
    dependencies:
      '@babel/parser': 8.0.0-alpha.12

--- a/src/components/GlobalSearch.vue
+++ b/src/components/GlobalSearch.vue
 <template>
-  <Input type="search" placeholder="Search..." />
+  <Input type="search" :placeholder="$t('search')" />
 </template>
--- a/src/components/LocaleSwitcher.vue
+++ b/src/components/LocaleSwitcher.vue
+<script setup lang="ts">
+const languages = {
+  de: {
+    full_name: 'Deutsch',
+    flag: '🇩🇪',
+  },
+  en: {
+    full_name: 'English',
+    flag: '🇬🇧',
+  },
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="outline">
+        <!-- TODO: Replace text with icon -->
+        Locale
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end">
+      <DropdownMenuRadioGroup v-model="$i18n.locale">
+        <DropdownMenuRadioItem v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">
+          <!-- TODO: Change check mark of radio group -->
+          <!-- Improve flag loading -->
+          {{ languages[locale].flag }} {{ languages[locale].full_name }}
+        </DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>
+
+<style scoped>
+
+</style>
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -6,7 +6,7 @@ const isMobile = useMobileView()
 </script>

 <template>
-  <div h-14 b-b bg-background>
+  <div h-topbar fixed z-20 w-full b-b bg-sidebar dark:b-secondary>
    <div flex justify-center gap-2 p-2>
      <Button v-if="isMobile" variant="ghost" @click="emit('toggleNavSidebar')">
        <icon-tooling />
@@ -16,6 +16,7 @@ const isMobile = useMobileView()
      <TransactionSidebarWidget v-if="!isMobile" @click="emit('toggleTransactionSidebar')" />
      <UserNav />
      <DarkModeToggle />
+      <LocaleSwitcher />
    </div>
  </div>
  <slot />

--- a/src/main.ts
+++ b/src/main.ts
+import messages from '@intlify/unplugin-vue-i18n/messages'
 import { createPinia } from 'pinia'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
 import App from './App.vue'

 import router from './router'
@@ -14,7 +16,13 @@ import '@unocss/reset/tailwind.css'
 const app = createApp(App)
 const pinia = createPinia()
 pinia.use(piniaPluginPersistedstate)
+const i18n = createI18n({
+  locale: navigator.language.split('-')[0] || 'en',
+  fallbackLocale: ['en', 'de'],
+  messages,
+})
 app.use(pinia)
+app.use(i18n)
 app.use(router)

 app.mount('#app')
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -7,7 +7,8 @@
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
-    }
+    },
+    "types": ["@intlify/unplugin-vue-i18n/messages"]
  },
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "auto-imports.d.ts", "components.d.ts"],
  "exclude": ["src/**/__tests__/*"]

--- a/vite.config.ts
+++ b/vite.config.ts
+import path from 'node:path'
 import { fileURLToPath, URL } from 'node:url'

+import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import vue from '@vitejs/plugin-vue'
 import colors from 'picocolors'
 import UnoCSS from 'unocss/vite'
@@ -36,6 +38,9 @@ export default defineConfig({
      silent: true,
      disablePassLogs: true,
    }),
+    VueI18nPlugin({
+      include: [path.resolve(__dirname, './src/locales/**')],
+    }),
    {
      name: 'nextvs-startup-logo',
      configureServer: (server) => {