[BUG] Use Vue UI libraries Such as PrimeVue

[kankanai]

What happened?

A bug happened!

Hello,I used "https://github.com/PlasmoHQ/examples"-With Vue, I would like to use a component package (https://primevue.org/) inside the content folder files,or popup.vue. To add to popup/options/newtab etc we have a defineOptions method:

import PrimeVue from 'primevue/config'; import type { App } from "vue"

defineOptions({ prepare(app: App) { app.use(PrimeVue); } }) Where can I setup primevue correctly. But within the files of the Content folder this does not work, I use the same code but the components do not appear.

Would you have any practical examples of how to use the component library within the contents?

I have been trying for a few hours and it has been very frustrating for me. If possible, thank you for your help

Version

Latest

What OS are you seeing the problem on?

Windows

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

(OPTIONAL) Contribution

• [ ] I would like to fix this BUG via a PR

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems.

[kankanai]

In addition, I found that the options. ts and popup. ts generated under static include

document.addEventListener("DOMContentLoaded", () => { const app = createApp(Component.default) Component.default.prepare?.(app) app.mount("#__plasmo") })

In addition, I found that the options. ts and popup. ts generated under static include

`switch (anchor.type) { case "inline": { const mountPoint = createInlineCSUIContainer({ anchor }) rootContainer.appendChild(mountPoint) const app = createApp(RawMount) app.config.globalProperties.$anchor = anchor app.mount(mountPoint) break } case "overlay": { const targetList = observer?.mountState.overlayTargetList || [ anchor.element ]

    targetList.forEach((target, i) => {
      const id = `plasmo-overlay-${i}`
      const innerAnchor: PlasmoCSUIAnchor = {
        element: target,
        type: "overlay"
      }

      const mountPoint = createOverlayCSUIContainer({
        id,
        anchor: innerAnchor,
        watchOverlayAnchor: Mount.watchOverlayAnchor
      })

      rootContainer.appendChild(mountPoint)

      const app = createApp(RawMount)
      app.config.globalProperties.$anchor = innerAnchor
      app.mount(mountPoint)
    })
    break
  }
}`

It can be seen that the prepare method was not executed.

[kankanai]

I prefer to use it https://primevue.org/ If possible, please provide a vue file under contents to use this UI framework as a demo. I believe many people need this. Thank you

[aiktb]

I prefer to use it https://primevue.org/ If possible, please provide a vue file under contents to use this UI framework as a demo. I believe many people need this. Thank you我更喜欢使用它 https://primevue.org/ 如果可能的话，请在 contents 下提供一个 vue 文件，以使用此 UI 框架作为 demo。我相信很多人都需要这个。谢谢

Agree with this, I've also spent hours trying to bring in the Vue component library in plasmo and have absolutely no idea how to do it.

Whilst component libraries are difficult to use, headlessui + tailwind integrates seamlessly with plasmo, which also cuts down on a lot of the time spent writing components.

[northsea4]

Is there any new progress on this issue?

[jfl913]

I prefer to use it https://primevue.org/ If possible, please provide a vue file under contents to use this UI framework as a demo. I believe many people need this. Thank you

Were you able to resolve this issue?