Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

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

Merged
merged 7 commits into from
Dec 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 15 additions & 2 deletions docs/content/1.getting-started/4.bridge-composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`

Expand Down
3 changes: 1 addition & 2 deletions packages/bridge/src/capi.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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())
Expand Down
5 changes: 2 additions & 3 deletions packages/bridge/src/runtime/capi.legacy.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
15 changes: 0 additions & 15 deletions packages/bridge/src/runtime/capi.legacy.plugin.mjs

This file was deleted.

16 changes: 15 additions & 1 deletion packages/bridge/src/runtime/capi.plugin.mjs
Original file line number Diff line number Diff line change
@@ -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
}
})
14 changes: 14 additions & 0 deletions packages/nuxt3/src/app/components/nuxt-root.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
1 change: 1 addition & 0 deletions packages/nuxt3/src/app/nuxt.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down