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
any help please? @louisgv sorry to ping you, but i dont know what to do =/ o try everything that i know
lab
lab12mo ago
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
lab12mo 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
lab12mo ago
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
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).
No description
No description
Wellington Capoia
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
lab11mo ago
cc @saihhold ^
Saihhold
Saihhold11mo ago
Thanks
jfl913
jfl9132mo ago
Hello, has this issue been resolved? I've encountered the same problem.
jfl913
jfl9132mo ago
It can be seen that the prepare method was not existed.
No description
Arcane
Arcane2mo ago
@jfl913 has reached level 1. GG!
jfl913
jfl9132mo ago
I notice many people are asking about this issue; can it be resolved?
lab
lab2mo ago
You mean calling the prepare method?
jfl913
jfl9132mo 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
YAGPDB.xyz2mo ago
Gave +1 Rep to @Arcane (current: #30 - 1)
jfl913
jfl9132mo ago
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...
Want results from more Discord servers?
Add your server
More Posts
Getting Tailwind to work in content scriptsI'm following the instructions from https://docs.plasmo.com/quickstarts/with-tailwindcss, with the eOpening content script only if an element is present on the page?I want to show my extension in a sidebar only if a certain value is present in the html of the page.how to import/use external component libraries? and how to register components?Hello, I would like to know how to import a library that will be used throughout the project (optionHow to insert a file using chrome.scripting?I am migrating this example from google tutorial https://github.com/GoogleChrome/chrome-extensions-sWhat is the correct way use an image url from assets to show notification?I use this: ```ts import iconUrl from "url:/assets/icon.png" chrome.notifications.create({ type:which is a good/scalable folder structure for a big extension?Hi, If I want to create an extension that has several content scripts that are very long (has many lHMR for other chromium browsersIs it possible to run a development server for opera, firefox, brave, edge, etc? I tried chaining ruParcel throwing an error in productionAs described here: https://github.com/PlasmoHQ/plasmo/issues/661, the following error is thrown: ```Is there an extension repository that shows how the testing should be done?Is there an extension repository that shows how the testing should be done? I want to see how the baHow do I troubleshoot my plasmo production build?My app is working well in development, but when I tried moving to the production build it no longer