mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-11 08:33:53 +00:00
feat(nuxt3, bridge): add vue:setup
hook (#2408)
This commit is contained in:
parent
4d2de05e43
commit
e674d0f60d
@ -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`
|
||||
|
||||
|
@ -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())
|
||||
|
@ -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) => {
|
||||
|
@ -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
|
||||
}
|
||||
})
|
@ -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
|
||||
}
|
||||
})
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
Loading…
Reference in New Issue
Block a user