feat(nuxt3, bridge): add vue:setup hook (#2408)

docs/content/1.getting-started/4.bridge-composition-api.md

@@ -92,8 +92,21 @@ You may wish to [migrate your plugins to Nuxt 3-style plugins](/getting-started/
 
 ### `onGlobalSetup`
 
-This function has been removed, but many use cases can be met by using `useNuxtApp` or `useState` within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
+This function has been removed, but its use cases can be met by using `useNuxtApp` or `useState` within `defineNuxtPlugin`. You can also run any custom code within the `setup()` function of a layout.
-If you have another use case for `onGlobalSetup`, please let us know via a discussion.
+
+```diff
+- import { onGlobalSetup } from '@nuxtjs/composition-api'
++ import { defineNuxtPlugin } from '#app'
+
+- export default () => {
+-   onGlobalSetup(() => {
++ export default defineNuxtPlugin((nuxtApp) => {
++   nuxtApp.hook('vue:setup', () => {
+      // ...
+    })
+- }
++ })
+```
 
 ### `ssrRef` and `shallowSsrRef`
 

packages/bridge/src/capi.ts

@@ -1,5 +1,5 @@
 import { createRequire } from 'module'
-import { useNuxt, addPlugin, addPluginTemplate, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
+import { useNuxt, addPluginTemplate, addVitePlugin, addWebpackPlugin } from '@nuxt/kit'
 import { resolve } from 'pathe'
 import { BridgeConfig } from '../types'
 import { distDir } from './dirs'
@@ -45,7 +45,6 @@ export function setupCAPIBridge (options: Exclude<BridgeConfig['capi'], boolean>
   // Handle legacy `@nuxtjs/composition-api`
   nuxt.options.alias['@nuxtjs/composition-api'] = resolve(distDir, 'runtime/capi.legacy.mjs')
   nuxt.options.build.transpile.push('@nuxtjs/composition-api', '@vue/composition-api')
-  addPlugin(resolve(distDir, 'runtime/capi.legacy.plugin.mjs'))
 
   // Enable automatic ssrRef key generation
   addVitePlugin(KeyPlugin.vite())

packages/bridge/src/runtime/capi.legacy.mjs

@@ -128,9 +128,8 @@ export const ssrPromise = (value, key) => {
 
 // Composition API functions
 export const onGlobalSetup = (fn) => {
-  warnOnce('onGlobalSetup', '`onGlobalSetup` is deprecated.')
+  warnOnce('onGlobalSetup', '`onGlobalSetup` is deprecated and has a Nuxt 3-compatible replacement.')
-  const app = useNuxtApp()
+  useNuxtApp().hook('vue:setup', fn)
-  app._setupFns.push(fn)
 }
 
 export const useAsync = (cb, key) => {

packages/bridge/src/runtime/capi.legacy.plugin.mjs

@@ -1,15 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp._setupFns = []
-
-  const _originalSetup = nuxtApp.nuxt2Context.app.setup
-
-  nuxtApp.nuxt2Context.app.setup = function (...args) {
-    const result = _originalSetup instanceof Function ? _originalSetup(...args) : {}
-    for (const fn of nuxtApp._setupFns) {
-      Object.assign(result, fn.call(this, ...args))
-    }
-    return result
-  }
-})

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

@@ -1,6 +1,20 @@
 import Vue from 'vue' // eslint-disable-line import/default
 import VueCompositionAPI from '@vue/composition-api'
+import { defineNuxtPlugin } from '#app'
 
 Vue.use(VueCompositionAPI.default || VueCompositionAPI)
 
-export default function () {}
+export default defineNuxtPlugin((nuxtApp) => {
+  const _originalSetup = nuxtApp.nuxt2Context.app.setup
+
+  nuxtApp.nuxt2Context.app.setup = function (...args) {
+    const result = _originalSetup instanceof Function ? _originalSetup(...args) : {}
+
+    const hookResult = nuxtApp.hooks.callHookWith(hooks => hooks.map(hook => hook()), 'vue:setup')
+    if (process.dev && hookResult && hookResult.some(i => i && 'then' in i)) {
+      console.error('[nuxt] Error in `vue:setup`. Callbacks must be synchronous.')
+    }
+
+    return result
+  }
+})

packages/nuxt3/src/app/components/nuxt-root.vue

@@ -3,3 +3,17 @@
     <App />
   </Suspense>
 </template>
+
+<script>
+import { useNuxtApp } from '#app'
+
+export default {
+  setup () {
+    const nuxtApp = useNuxtApp()
+    const results = nuxtApp.hooks.callHookWith(hooks => hooks.map(hook => hook()), 'vue:setup')
+    if (process.dev && results && results.some(i => i && 'then' in i)) {
+      console.error('[nuxt] Error in `vue:setup`. Callbacks must be synchronous.')
+    }
+  }
+}
+</script>

packages/nuxt3/src/app/nuxt.ts

@@ -23,6 +23,7 @@ export interface RuntimeNuxtHooks {
   'page:start': (Component?: VNode) => HookResult
   'page:finish': (Component?: VNode) => HookResult
   'meta:register': (metaRenderers: Array<(nuxt: NuxtApp) => NuxtMeta | Promise<NuxtMeta>>) => HookResult
+  'vue:setup': () => void
 }
 
 interface _NuxtApp {