🧩 Plasmo Developers•15mo ago

How to use a component library on Contents?

Hello, I would like to use a component package (https://primevue.org/) inside the content folder files. To add to popup/options/newtab etc we have a defineOptions method:

defineOptions({
   prepare(app: app) {
     app.use(PrimeVue);
     app.component("Button", Button)
   }
})

defineOptions({
   prepare(app: app) {
     app.use(PrimeVue);
     app.component("Button", Button)
   }
})

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?

16 Replies

Wellington Capoia•15mo ago

any help please? @louisgv sorry to ping you, but i dont know what to do =/ o try everything that i know

lab•15mo ago

See this: https://github.com/PlasmoHQ/examples/blob/main/with-vue/contents/plasmo-inline.vue#L29

GitHub

examples/with-vue/contents/plasmo-inline.vue at main · PlasmoHQ/exa...

🔰 Example projects that demonstrate how to use the Plasmo Framework and integrate with popular tools - PlasmoHQ/examples

lab•15mo ago

it's undocumented (if you can help document it that'd be great :p ), but if you export a prepare function, it will allow you to do vue plugin setup

lab•15mo ago

See here how prepare function is passed an app instance: https://github.com/PlasmoHQ/plasmo/blob/main/cli/plasmo/templates/static/vue3/index.ts

GitHub

plasmo/cli/plasmo/templates/static/vue3/index.ts at main · PlasmoHQ...

🧩 The Browser Extension Framework. Contribute to PlasmoHQ/plasmo development by creating an account on GitHub.

Wellington Capoia•14mo ago

Hi @louisgv, sorry for the delay, I managed to do it somehow "ugly" and then I forgot to come back here. I tested exporting the prepare function, in all possible ways, as I had already shown above (composition api), as in the example (options api), in short, in all the ways that I know (and even the ones that work in the popup file .ts), but I really can't get it to work. Here's a print of the ways I tried (apart from the first print of this topic).

Wellington Capoia•14mo ago

What I did to make it work the "ugly" way was to use vue's getCurrentInstance() function and in the onmounted hook I use instances to use vue.use() and so on.

lab•14mo ago

cc @saihhold ^

Saihhold•14mo ago

Thanks

jfl913•5mo ago

Hello, has this issue been resolved? I've encountered the same problem.

jfl913•5mo ago

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

Arcane•5mo ago

@jfl913 has reached level 1. GG!

jfl913•5mo ago

I notice many people are asking about this issue; can it be resolved?

lab•5mo ago

You mean calling the prepare method?

jfl913•5mo ago

Many Vue users want to use Vue UI libraries such as PrimeVue within CSUI. However, there's no defineOptions method, like the ones available for popup, options, or newtab, where we can use prepare(app: App) to integrate PrimeVue. Thank you so much.

YAGPDB.xyz•5mo ago

Gave +1 Rep to @Arcane (current: #30 - 1)

jfl913•5mo ago

https://github.com/PlasmoHQ/plasmo/issues/824

GitHub

[BUG] Use Vue UI libraries Such as PrimeVue · Issue #824 · PlasmoH...

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 file...

Gaming

Programming

How to use a component library on Contents?