fix(bridge): don't double-install plugins when using compat vueApp.use (#3898)

docs/content/1.getting-started/3.bridge.md

@@ -194,6 +194,10 @@ export default defineNuxtPlugin(nuxtApp => {
 If you want to use the new Nuxt composables (such as `useNuxtApp` or `useRuntimeConfig`) within your plugins, you will need to use the `defineNuxtPlugin` helper for those plugins.
 ::
 
+::alert{type=warning}
+Although a compatibility interface is provided via `nuxtApp.vueApp` you should avoid registering plugins, directives, mixins or components this way without adding your own logic to ensure they are not installed more than once, or this may cause a memory leak.
+::
+
 ## New `useMeta` (optional)
 
 Nuxt Bridge provides a new Nuxt 3 meta API that can be accessed with a new `useMeta` composable.

packages/bridge/src/runtime/app.plugin.mjs

@@ -19,20 +19,29 @@ function proxiedState (state) {
   })
 }
 
+const runOnceWith = (obj, fn) => {
+  if (!obj || !['function', 'object'].includes(typeof obj)) {
+    return fn()
+  }
+  if (obj.__nuxt_installed) { return }
+  obj.__nuxt_installed = true
+  return fn()
+}
+
 export default async (ctx, inject) => {
   const nuxtApp = {
     vueApp: {
-      component: Vue.component.bind(Vue),
+      component: (id, definition) => runOnceWith(definition, () => Vue.component(id, definition)),
       config: {
         globalProperties: {}
       },
-      directive: Vue.directive.bind(Vue),
+      directive: (id, definition) => runOnceWith(definition, () => Vue.directive(id, definition)),
-      mixin: Vue.mixin.bind(Vue),
+      mixin: mixin => runOnceWith(mixin, () => Vue.mixin(mixin)),
       mount: () => { },
       provide: inject,
       unmount: () => { },
       use (vuePlugin) {
-        vuePlugin.install(this)
+        runOnceWith(vuePlugin, () => vuePlugin.install(this))
       },
       version: Vue.version
     },