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

This commit is contained in:
Daniel Roe 2021-12-21 14:44:35 +00:00 committed by GitHub
parent 4d2de05e43
commit e674d0f60d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 48 additions and 23 deletions

View File

@ -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.
If you have another use case for `onGlobalSetup`, please let us know via a discussion.
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.
```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`

View File

@ -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())

View File

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

View File

@ -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
}
})

View File

@ -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
}
})

View File

@ -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>

View File

@ -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 {