From e28c6312e41b889d717313b89f0757168778371c Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Thu, 8 May 2025 10:10:10 +0530
Subject: [PATCH] feat: make i18n work

---
 app/javascript/entrypoints/ui.js | 11 ++++++++---
 public/test-components.html      |  1 -
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/javascript/entrypoints/ui.js b/app/javascript/entrypoints/ui.js
index cf3ce529b..04d6c6425 100644
--- a/app/javascript/entrypoints/ui.js
+++ b/app/javascript/entrypoints/ui.js
@@ -1,5 +1,4 @@
 import { defineCustomElement } from 'vue';
-import { createI18n } from 'vue-i18n';
 
 import '../dashboard/assets/scss/app.scss';
 import 'vue-multiselect/dist/vue-multiselect.css';
@@ -12,11 +11,12 @@ import constants from 'dashboard/constants/globals';
 import axios from 'axios';
 import createAxios from 'dashboard/helper/APIHelper';
 import commonHelpers from 'dashboard/helper/commons';
-import i18nMessages from 'dashboard/i18n';
 
 import WootButton from '../dashboard/components-next/button/Button.vue';
 import WootInput from '../dashboard/components-next/input/Input.vue';
 import WootMessage from '../dashboard/components-next/message/Message.vue';
+import i18nMessages from '../dashboard/i18n';
+import { createI18n, I18nInjectionKey } from 'vue-i18n';
 
 const i18n = createI18n({
   legacy: false,
@@ -26,8 +26,13 @@ const i18n = createI18n({
 
 const ceOptions = {
   configureApp(app) {
-    app.use(i18n);
     app.use(store);
+    app.use(i18n);
+    // I18n has to be injected inside that can be picked
+    // up by the compononent, the API stays the same, just use `useI18n`
+    // https://vue-i18n.intlify.dev/guide/advanced/wc
+    // Adding this link for my goldfish brain
+    app.provide(I18nInjectionKey, i18n);
   },
   // Include tailwind styles in the shadow DOM of each custom element
   styles: [tailwindStyles],
diff --git a/public/test-components.html b/public/test-components.html
index 8fb134619..b9de31f41 100644
--- a/public/test-components.html
+++ b/public/test-components.html
@@ -24,7 +24,6 @@
       message-type="0"
       content-type="text"
       status="sent"
-      placeholder="Type something..."
     ></woot-message>
 
     <script src="/packs/js/ui.js"></script>