feat(nuxt): transform setup within defineComponent options (#24515)

packages/nuxt/src/app/composables/asyncContext.ts

@@ -1,9 +1,11 @@
 // @ts-expect-error withAsyncContext is internal API
 import { getCurrentInstance, withAsyncContext as withVueAsyncContext } from 'vue'
 
-export function withAsyncContext (fn: () => PromiseLike<unknown>) {
+export function withNuxtContext <T>(fn: () => T) {
-  return withVueAsyncContext(() => {
+  const nuxtApp = getCurrentInstance()?.appContext.app.$nuxt
-    const nuxtApp = getCurrentInstance()?.appContext.app.$nuxt
+  return nuxtApp ? nuxtApp.runWithContext(fn) : fn()
-    return nuxtApp ? nuxtApp.runWithContext(fn) : fn()
+}
-  })
+
+export function withAsyncContext (fn: () => PromiseLike<unknown>) {
+  return withVueAsyncContext(() => withNuxtContext(fn))
 }

packages/nuxt/src/app/composables/component.ts

@@ -1,8 +1,9 @@
-import { getCurrentInstance, reactive, toRefs } from 'vue'
+import { defineComponent as _defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
-import type { DefineComponent, defineComponent } from 'vue'
+import type { ComponentOptions, DefineComponent } from 'vue'
 import { useHead } from '@unhead/vue'
 import type { NuxtApp } from '../nuxt'
 import { useNuxtApp } from '../nuxt'
+import { withNuxtContext } from './asyncContext'
 import { useAsyncData } from './asyncData'
 import { useRoute } from './router'
 import { createError } from './error'
@@ -28,7 +29,7 @@ async function runLegacyAsyncData (res: Record<string, any> | Promise<Record<str
 }
 
 /*@__NO_SIDE_EFFECTS__*/
-export const defineNuxtComponent: typeof defineComponent =
+export const defineNuxtComponent: typeof _defineComponent =
   function defineNuxtComponent (...args: any[]): any {
     const [options, key] = args
     const { setup } = options
@@ -68,3 +69,18 @@ export const defineNuxtComponent: typeof defineComponent =
       }
     } as DefineComponent
   }
+
+export const defineComponent: typeof _defineComponent = (arg1: Function | Record<string, any>, arg2?: Partial<ComponentOptions>) => {
+  if (typeof arg1 === 'function') {
+    return _defineComponent((...args) => withNuxtContext(() => arg1(...args)), arg2)
+  }
+
+  if (arg1.setup) {
+    return _defineComponent({
+      ...arg1,
+      setup: (...args: any[]) => withNuxtContext(() => arg1.setup(...args))
+    }) as any
+  }
+
+  return _defineComponent(arg1)
+}

packages/nuxt/src/imports/presets.ts

@@ -30,7 +30,7 @@ const granularAppPresets: InlinePreset[] = [
     from: '#app/config'
   },
   {
-    imports: ['defineNuxtComponent'],
+    imports: ['defineComponent', 'defineNuxtComponent'],
     from: '#app/composables/component'
   },
   {
@@ -156,7 +156,6 @@ const vuePreset = defineUnimportPreset({
     'onScopeDispose',
 
     // Component
-    'defineComponent',
     'defineAsyncComponent',
     'resolveComponent',
     'getCurrentInstance',

packages/nuxt/test/auto-imports.test.ts

@@ -81,6 +81,8 @@ describe('imports:nuxt', () => {
 })
 
 const excludedVueHelpers = [
+  // Nuxt stub for this helper
+  'defineComponent',
   // Already globally registered
   'defineEmits',
   'defineExpose',

packages/schema/src/config/build.ts

@@ -189,6 +189,7 @@ export default defineUntypedSchema({
     asyncTransforms: {
       asyncFunctions: ['defineNuxtPlugin', 'defineNuxtRouteMiddleware'],
       objectDefinitions: {
+        defineComponent: ['setup'],
         defineNuxtComponent: ['asyncData', 'setup'],
         defineNuxtPlugin: ['setup'],
         definePageMeta: ['middleware', 'validate']

test/basic.test.ts

@@ -1951,10 +1951,14 @@ describe.skipIf(isDev() || isWindows || !isRenderingJson)('payload rendering', (
   })
 })
 
-describe.skipIf(process.env.TEST_CONTEXT !== 'async')('Async context', () => {
+describe('Async context', () => {
-  it('should be available', async () => {
+  it.skipIf(process.env.TEST_CONTEXT !== 'async')('should be available', async () => {
     expect(await $fetch('/async-context')).toContain('"hasApp": true')
   })
+  it('should transform `setup` within defineComponent', async () => {
+    const html = await $fetch('/async-transform-component')
+    expect(html).toContain('using automatic `setup` async transform')
+  })
 })
 
 describe.skipIf(isWindows)('useAsyncData', () => {

test/fixtures/basic/pages/async-transform-component.vue

@@ -0,0 +1,14 @@
+<script>
+export default defineComponent({
+  async setup () {
+    await nextTick()
+    useRuntimeConfig()
+  }
+})
+</script>
+
+<template>
+  <div>
+    should not error out when using automatic `setup` async transform
+  </div>
+</template>