feat: basic vue-i18n

2026-01-07 09:10:05 -06:00 · 2023-07-26 14:51:37 -07:00
parent 4284dff515
commit 2e39a5bceb
10 changed files with 169 additions and 14 deletions
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>

--- a/components/I18nHost.ce.vue
+++ b/components/I18nHost.ce.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { provide } from 'vue';
+import { createI18n, I18nInjectionKey } from 'vue-i18n';
+
+/**
+ * Define the web components that host the i18n instance.
+ *
+ * Because the web components environment isn't hosted in a Vue apps by `createApp`, but is provided by itself.
+ * The i18n instance created by `createI18n` will be installed with `app.use` in Vue apps,
+ * so that you can use i18n features with `useI18n` in Vue components.
+ * In order to use `useI18n` in web components, you need to have web components hosted as root to use it.
+ */
+
+/**
+ * create an i18n instance to host for other web components
+ */
+const i18n = createI18n<false>({
+  legacy: false, // must set to `false`
+  locale: 'en',
+  messages: {
+    en: {
+      hello: 'Hello!'
+    },
+    ja: {
+      hello: 'こんにちは！'
+    }
+  }
+});
+/**
+ * provide i18n instance with `I18nInjectionKey` for other web components
+ */
+provide(I18nInjectionKey, i18n);
+
+// watchEffect(() => {
+//   i18n.global.locale.value = props.locale;
+// });
+</script>
+
+<template>
+  <slot />
+</template>
--- a/components/UserProfile.ce.vue
+++ b/components/UserProfile.ce.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
-import { storeToRefs } from 'pinia';
 import { OnClickOutside } from '@vueuse/components';
+import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';

 import { useCallbackStore } from '~/store/callbackActions';
 import { useDropdownStore } from '~/store/dropdown';
@@ -77,6 +78,8 @@ onBeforeMount(() => {
   */
  callbackStore.watcher();
 });
+
+const { t } = useI18n();
 </script>

 <template>
@@ -92,7 +95,8 @@ onBeforeMount(() => {
    <div class="relative z-10 flex flex-row items-center justify-end gap-x-16px h-full">
      <h1 class="text-alpha text-14px sm:text-18px relative flex flex-col-reverse items-end md:flex-row border-t-0 border-r-0 border-l-0 border-b-2 border-transparent">
        <template v-if="description && theme?.descriptionShow">
-          <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span>
+          <!-- <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ description }}</span> -->
+          <span class="text-right text-12px sm:text-18px hidden 2xs:block">{{ t('hello') }}</span>
          <span class="text-gamma hidden md:inline-block px-8px">&bull;</span>
        </template>
        <button :title="`Click to Copy LAN IP ${lanIp}`" @click="copyLanIp()">
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,10 @@
 <template>
  <client-only>
    <div class="flex flex-row items-center justify-center gap-6 p-6 text-gray-200 bg-zinc-800">
-      <NuxtLink to="/" class="underline hover:no-underline focus:no-underline">
+      <NuxtLink to="/" class="underline hover:no-underline focus:no-underline" active-class="text-orange">
        Test Vue Components
      </NuxtLink>
-      <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline">
+      <NuxtLink to="/webComponents" class="underline hover:no-underline focus:no-underline" active-class="text-orange">
        Test Web Components
      </NuxtLink>
    </div>
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -35,6 +35,10 @@ export default defineNuxtConfig({
      {
        name: 'UnraidComponents',
        tags: [
+          {
+            name: 'UnraidI18nHost',
+            path: '@/components/I18nHost.ce',
+          },
          {
            name: 'UnraidAuth',
            path: '@/components/Auth.ce',
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
        "graphql-tag": "^2.12.6",
        "graphql-ws": "^5.14.0",
        "hex-to-rgba": "^2.0.1",
+        "vue-i18n": "^9.2.2",
        "wretch": "^2.6.0"
      },
      "devDependencies": {
@@ -3662,6 +3663,63 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
+    "node_modules/@intlify/core-base": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.2.2.tgz",
+      "integrity": "sha512-JjUpQtNfn+joMbrXvpR4hTF8iJQ2sEFzzK3KIESOx+f+uwIjgw20igOyaIdhfsVVBCds8ZM64MoeNSx+PHQMkA==",
+      "dependencies": {
+        "@intlify/devtools-if": "9.2.2",
+        "@intlify/message-compiler": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/devtools-if": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.2.2.tgz",
+      "integrity": "sha512-4ttr/FNO29w+kBbU7HZ/U0Lzuh2cRDhP8UlWOtV9ERcjHzuyXVZmjyleESK6eVP60tGC9QtQW9yZE+JeRhDHkg==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.2.2.tgz",
+      "integrity": "sha512-IUrQW7byAKN2fMBe8z6sK6riG1pue95e5jfokn8hA5Q3Bqy4MBJ5lJAofUsawQJYHeoPJ7svMDyBaVJ4d0GTtA==",
+      "dependencies": {
+        "@intlify/shared": "9.2.2",
+        "source-map": "0.6.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.2.2.tgz",
+      "integrity": "sha512-wRwTpsslgZS5HNyM7uDQYZtxnbI12aGiBZURX3BTR9RFIKKRWpllTsgzHWvj3HKm3Y2Sh5LPC1r0PDCKEhVn9Q==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
+    "node_modules/@intlify/vue-devtools": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.2.2.tgz",
+      "integrity": "sha512-+dUyqyCHWHb/UcvY1MlIpO87munedm3Gn6E9WWYdWrMuYLcoIoOEVDWSS8xSwtlPU+kA+MEQTP6Q1iI/ocusJg==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2"
+      },
+      "engines": {
+        "node": ">= 14"
+      }
+    },
    "node_modules/@ioredis/commands": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/@ioredis/commands/-/commands-1.2.0.tgz",
@@ -18434,7 +18492,6 @@
      "version": "0.6.1",
      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -20677,6 +20734,23 @@
        "node": ">=4.0"
      }
    },
+    "node_modules/vue-i18n": {
+      "version": "9.2.2",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.2.2.tgz",
+      "integrity": "sha512-yswpwtj89rTBhegUAv9Mu37LNznyu3NpyLQmozF3i1hYOhwpG8RjcjIFIIfnu+2MDZJGSZPXaKWvnQA71Yv9TQ==",
+      "dependencies": {
+        "@intlify/core-base": "9.2.2",
+        "@intlify/shared": "9.2.2",
+        "@intlify/vue-devtools": "9.2.2",
+        "@vue/devtools-api": "^6.2.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
    "node_modules/vue-router": {
      "version": "4.2.4",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.4.tgz",
--- a/package.json
+++ b/package.json
@@ -47,6 +47,7 @@
    "graphql-tag": "^2.12.6",
    "graphql-ws": "^5.14.0",
    "hex-to-rgba": "^2.0.1",
+    "vue-i18n": "^9.2.2",
    "wretch": "^2.6.0"
  },
  "overrides": {
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@ import { serverState } from '~/_data/serverState';

 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>

--- a/pages/webComponents.vue
+++ b/pages/webComponents.vue
@@ -3,7 +3,7 @@ import { serverState } from '~/_data/serverState';

 const nuxtApp = useNuxtApp();
 onBeforeMount(() => {
-  nuxtApp.$customElements.registerEntry('ConnectComponents');
+  nuxtApp.$customElements.registerEntry('UnraidComponents');
 });
 </script>

@@ -14,22 +14,34 @@ onBeforeMount(() => {
        <div class="flex flex-col gap-6 p-6">
          <h2>Web Components</h2>
          <h3>UserProfileCe</h3>
-          <unraid-user-profile :server="JSON.stringify(serverState)" />
+          <unraid-i18n-host>
+            <unraid-user-profile :server="JSON.stringify(serverState)" />
+          </unraid-i18n-host>
          <hr>
          <h3>DownloadApiLogsCe</h3>
-          <unraid-download-api-logs />
+          <unraid-i18n-host>
+            <unraid-download-api-logs />
+          </unraid-i18n-host>
          <hr>
          <h3>AuthCe</h3>
-          <unraid-auth />
+          <unraid-i18n-host>
+            <unraid-auth />
+          </unraid-i18n-host>
          <hr>
          <h3>KeyActionsCe</h3>
-          <unraid-key-actions />
+          <unraid-i18n-host>
+            <unraid-key-actions />
+          </unraid-i18n-host>
          <hr>
          <h3>WanIpCheckCe</h3>
-          <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
+          <unraid-i18n-host>
+            <unraid-wan-ip-check php-wan-ip="47.184.85.45" />
+          </unraid-i18n-host>
          <hr>
          <h3>ModalsCe</h3>
-          <unraid-modals />
+          <unraid-i18n-host>
+            <unraid-modals />
+          </unraid-i18n-host>
        </div>
      </div>
    </div>
--- a/plugins/i18n.ts
+++ b/plugins/i18n.ts
@@ -0,0 +1,19 @@
+import { createI18n } from 'vue-i18n';
+
+export default defineNuxtPlugin(({ vueApp }) => {
+  const i18n = createI18n({
+    legacy: false,
+    globalInjection: true,
+    locale: 'ja',
+    messages: {
+      en: {
+        hello: 'Hello!'
+      },
+      ja: {
+        hello: 'こんにちは！'
+      }
+    }
+  });
+
+  vueApp.use(i18n);
+});