refactor: use vue

app/javascript/entrypoints/ui.js

@@ -1,10 +1,9 @@
-import { defineCustomElement } from 'vue';
+import { createApp } from 'vue';
 
 import '../dashboard/assets/scss/app.scss';
 import 'vue-multiselect/dist/vue-multiselect.css';
 import 'floating-vue/dist/style.css';
-// Import Tailwind styles - we'll use these in the shadow DOM
-import tailwindStyles from '../dashboard/assets/scss/_woot.scss?inline';
+// import tailwindStyles from '../dashboard/assets/scss/_woot.scss?inline';
 
 import VueDOMPurifyHTML from 'vue-dompurify-html';
 import { domPurifyConfig } from '../shared/helpers/HTMLSanitizer.js';
@@ -18,7 +17,7 @@ import vueActionCable from '../dashboard/helper/actionCable';
 
 import MessageList from '../ui/MessageList.vue';
 import i18nMessages from '../dashboard/i18n';
-import { createI18n, I18nInjectionKey } from 'vue-i18n';
+import { createI18n } from 'vue-i18n';
 
 const i18n = createI18n({
   legacy: false,
@@ -29,28 +28,17 @@ const i18n = createI18n({
 commonHelpers();
 // eslint-disable-next-line no-underscore-dangle
 window.__CHATWOOT_STORE__ = store;
-
 window.WootConstants = constants;
 window.axios = createAxios(axios);
 
 store.dispatch('setUser').then(() => {
-  const ceOptions = {
-    configureApp(app) {
-      app.use(store);
-      app.use(i18n);
-      app.use(VueDOMPurifyHTML, domPurifyConfig);
-      // eslint-disable-next-line no-underscore-dangle
-      vueActionCable.init(store, window.__PUBSUB_TOKEN__);
-      // 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],
-  };
+  const app = createApp(MessageList);
 
-  const messageListElement = defineCustomElement(MessageList, ceOptions);
-  customElements.define('woot-message-list', messageListElement);
+  app.use(store);
+  app.use(i18n);
+  app.use(VueDOMPurifyHTML, domPurifyConfig);
+  // eslint-disable-next-line no-underscore-dangle
+  vueActionCable.init(store, window.__PUBSUB_TOKEN__);
+
+  app.mount('#app');
 });