PlasmoHQ / with-vue

Plasmo with-vue basic example template
18 stars 0 forks source link

how to import/use external component libraries? and how to register components? #7

Open capoia opened 1 year ago

capoia commented 1 year ago

Hello, I would like to know how to import a library that will be used throughout the project (options / popup / content / CSUI...) example: https://primevue.org/installation/

And another doubt would be how do I import previously created components (.vue), mainly within the CSUI.

jfl913 commented 1 year ago

Here is a reference for you

import "vuetify/lib/styles/main.css"
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components/index.mjs'
import * as directives from 'vuetify/lib/directives/index.mjs'
defineOptions({
    prepare(app: App) {
        // Use any plugins here:
        // app.use
        const vuetify = createVuetify({
            components,
            directives,
        })
        app.use(vuetify)
    }
})
capoia commented 1 year ago

Here is a reference for you

import "vuetify/lib/styles/main.css"
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/lib/components/index.mjs'
import * as directives from 'vuetify/lib/directives/index.mjs'
defineOptions({
    prepare(app: App) {
        // Use any plugins here:
        // app.use
        const vuetify = createVuetify({
            components,
            directives,
        })
        app.use(vuetify)
    }
})

@jfl913 Thank you very much for your help, but I still have one doubt:

I managed to make it work on the popup, but not on the contents

jfl913 commented 1 year ago

Yes, you need to import/define the package in each place.