How to override popup.ts in .plasmo/static/popup.ts in plasmo with vue

[yasaidev]

Problem

I want to use primevue with plasmo.
So I need load vue plugin, then I want to change .plasmo/static/popup.ts like below.
But Whenever I rewrite .plasmo/static/popup.ts like TO-BE , if I put npm run dev, then popup.ts will rewrite and be AS-IS.

AS-IS

// @ts-nocheck
import * as Component from "../../popup.vue"
import { createApp } from "vue"

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

TO-BE

// @ts-nocheck
import * as Component from "../../popup.vue"
import { createApp } from "vue"
import PrimeVue from 'primevue/config'; #ADD

document.addEventListener("DOMContentLoaded", () => {
  const app = createApp(Component.default)
  app.mount("#root")
  app.use(PrimeVue) #ADD
})

Please somebody tell me how to override popup.ts...

Settings

git clone https://github.com/PlasmoHQ/with-vue
npm install 
npm install primevue

[louisgv]

@yasaidev just updated vue to support plugin via a prepare option, refer to this for example: https://github.com/PlasmoHQ/examples/blob/main/with-vue/popup.vue

You will need to upgrade to plasmo v0.72.1 as well as latest vue for this feature.

[yasaidev]

@louisgv

Below is old and wrong info, don't look these.
louisgv-san method will be absolutely work.

Thank you. I checked this code and tested, but unfortunately I got error like below.
I think this problem is might related with below issue, but I didn't checked.

• Webpack / Vue CLI: defineOptions is not defined (production mode)

Uncaught ReferenceError: defineOptions is not defined
    at setup (popup.vue:55:15)
    at callWithErrorHandling (runtime-core.esm-bundler.js:159:17)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7240:52)
    at setupComponent (runtime-core.esm-bundler.js:7198:32)
    at mountComponent (runtime-core.esm-bundler.js:5601:9)
    at processComponent (runtime-core.esm-bundler.js:5576:7)
    at patch (runtime-core.esm-bundler.js:5051:32)
    at render (runtime-core.esm-bundler.js:6334:5)
    at mount (runtime-core.esm-bundler.js:3826:11)
    at app.mount (runtime-dom.esm-bundler.js:1432:9)

Environment

Info

$ node -v                        
v18.16.0
$ npm -v
8.5.5
$ systeminfo
OS Name:                   Microsoft Windows 11 Education
OS Version:                10.0.22621 N/A Build 22621

How to test

npm create plasmo -- --with-vue
npm install
npm run dev

[yasaidev]

I also found a quick way to use vue plugin with plasmo.

<script setup lang="ts">
+import { reactive, getCurrentInstance } from "vue"
import type { App } from "vue"

const state = reactive({ count: 0, action: null })
+const vueInstance = getCurrentInstance()
+vueInstance ?.appContext.app.use()

function increment() {
  state.count++
  state.action = "increment"
}

function decrement() {
  state.count--
  state.action = "decrement"
}

-defineOptions({
-  prepare(app: App) {
-    // Use any plugins here:
-    // app.use
-  }
-})

</script>

To use getCurrentInstance() I can get current vue instance and call app.use.
You need attention, I am newb vue user and this way is not correct for lifecycle.

Anyway this way is worked for me.
Please let me know if you have good way or see this way is dangerous.

[louisgv]

To use defineOptions, you need the latest version of vue

[yasaidev]

@louisgv
Thank you for your advise.

Uhh... I have tested with latest vue.

I throw up my hands.😭

[yasaidev]

I tested again and then worked as you supposed.
Thank you for your support, I will close this case.