🧩 Plasmo Developers•16mo 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?

19 Replies

Wellington CapoiaOP•16mo ago

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

lab•16mo 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•16mo 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•16mo 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 CapoiaOP•16mo 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 CapoiaOP•16mo 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•15mo ago

cc @saihhold ^

Saihhold•15mo ago

Thanks

jfl913•6mo ago

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

jfl913•6mo ago

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

Arcane•6mo ago

@jfl913 has reached level 1. GG!

jfl913•6mo ago

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

lab•6mo ago

You mean calling the prepare method?

jfl913•6mo 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•6mo ago

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

jfl913•6mo 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...

aherod•3w ago

I've encountered the same issue when using a plugin within the contents files. It works in popup, newtab but not in the contents. I've tried different approaches with defineOptions and "prepare" fn, but none work. I also tried using app instance like so: onBeforeMount(() => { const app = getCurrentInstance()?.appContext.app; app.use(MyPlugin); }) but it makes a new error: "Uncaught (in promise) Error: Cannot find module '8Wl7u' at newRequire" @lab any suggestions on how to make the plugin work in contents?

lab•3w ago

this requires your module to be bundled, so I'd try experimenting with some of the import schema

aherod•3w ago

@lab But using onBeforeMount hook is still some workaround. Are there any other solutions or working examples of using any plugin/library within the contents files?

Gaming

Programming

How to use a component library on Contents?