[Bug]: vendor-vue does not export useCssVars, useSlots, ...

[Matoseb]

Frontend Version

1.19.9

Expected Behavior

Retrieve vue core api for plugin usage

Actual Behavior

Missing some vue methods: useCssCars, useSlots, etc.

Steps to Reproduce

Looking at vendor-vue-[hash].js built by Vite, some Vue methods are kept private at runtime, which prevents to use the Vue API for plugins. (I'm using the vue dependency as external in my own vite app)

Main index.html:

<script type="importmap">
      {
        "imports": {
          "primevue": "./assets/vendor-primevue-CDQ0APuK.js",
          "vue": "./assets/vendor-vue-B7YUw5vA.js"
        }
      }
</script>
<script type="module">
import {ref, reactive, useSlots } from "vue" // error useSlots is missing
</script>

Debug Logs

// unnecessary

Browser Logs

Error loading extension /extensions/myextension/js/index.js SyntaxError: The requested module 'vue' does not provide an export named 'useCssVars'

Setting JSON

{ "Comfy.ColorPalette": "dark", "Comfy.TutorialCompleted": true, "Comfy.LinkRenderMode": 2, "Comfy.Locale": "en" }

What browsers do you use to access the UI ?

Google Chrome

Other Information

No response

┆Issue is synchronized with this Notion page by Unito

[jtydhr88]

Hi, this feature - exporting vue, is still working in progress, we may change it to another solution. I will ping you here when it is ready

[Matoseb]

Thanks for your response, I would say importmap is still a great way, as it can be used at runtime or used in a built vite app

// vite.config.js of my extension
export default defineConfig(() => ({
  build: {
    rollupOptions: {
      external: ["vue"]
    }
  }
  // ...
});

Here is the bit of code I use to hack into the Comfy VueApp, could be wrapped in a global utility function

import PluginApp from "./MyPluginApp.vue"
import { createVNode, render } from "vue";

const container = document.body.querySelector("#vue-app");
const vueApp = container.__vue_app__;

// vue plugin
vueApp.use({
    install: (app, options) => {

        const vNode = createVNode(MyPluginApp);
        vNode.appContext = app._context;

        const pluginContainer = document.createElement("div");
        pluginContainer.id = "myplugin";
        document.body.appendChild(pluginContainer);

        render(vNode, pluginContainer);
    },
});

[christian-byrne]

Is this fixed?

[jtydhr88]

I don’t test all of the method but in my personal vue-basic project current solution is working well. I would like to close this issue for now. @Matoseb please feel free to reopen if you still have questions