fix(nuxt3): add missing auto imports (#1735)

packages/bridge/src/auto-imports.ts

@@ -1,7 +1,9 @@
 import { installModule, useNuxt } from '@nuxt/kit'
+import * as CompositionApi from '@vue/composition-api'
 import autoImports from '../../nuxt3/src/auto-imports/module'
 
 const UnsupportedImports = new Set(['useAsyncData', 'useFetch'])
+const CapiHelpers = new Set(Object.keys(CompositionApi))
 
 const ImportRewrites = {
   vue: '@vue/composition-api',
@@ -21,6 +23,9 @@ export async function setupAutoImports () {
       if (UnsupportedImports.has(autoImport.name)) {
         autoImport.disabled = true
       }
+      if (autoImport.from === '@vue/composition-api' && !CapiHelpers.has(autoImport.name)) {
+        autoImport.disabled = true
+      }
     }
   })
 

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

@@ -0,0 +1,30 @@
+import * as CompositionApi from '@vue/composition-api'
+import { expect } from 'chai'
+
+import { Nuxt3AutoImports } from '../../nuxt3/src/auto-imports/imports'
+
+const excludedVueHelpers = [
+  'EffectScope',
+  'createApp',
+  'createRef',
+  'default',
+  'del',
+  'isRaw',
+  'set',
+  'useCSSModule',
+  'version',
+  'warn',
+  'watchPostEffect',
+  'watchSyncEffect'
+]
+
+describe('auto-imports:vue', () => {
+  for (const name of Object.keys(CompositionApi)) {
+    if (excludedVueHelpers.includes(name)) {
+      continue
+    }
+    it(`should register ${name} globally`, () => {
+      expect(Nuxt3AutoImports.find(a => a.from === 'vue').names).to.include(name)
+    })
+  }
+})

packages/nuxt3/src/auto-imports/imports.ts

@@ -33,6 +33,19 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
   {
     from: 'vue',
     names: [
+      // <script setup>
+      'defineEmits',
+      'defineExpose',
+      'defineProps',
+      'withAsyncContext',
+      'withCtx',
+      'withDefaults',
+      'withDirectives',
+      'withKeys',
+      'withMemo',
+      'withModifiers',
+      'withScopeId',
+
       // Lifecycle
       'onActivated',
       'onBeforeMount',
@@ -41,6 +54,8 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
       'onDeactivated',
       'onErrorCaptured',
       'onMounted',
+      'onRenderTracked',
+      'onRenderTriggered',
       'onServerPrefetch',
       'onUnmounted',
       'onUpdated',
@@ -48,15 +63,19 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
       // Reactivity
       'computed',
       'customRef',
+      'isProxy',
+      'isReactive',
       'isReadonly',
       'isRef',
       'markRaw',
+      'proxyRefs',
       'reactive',
       'readonly',
       'ref',
       'shallowReactive',
       'shallowReadonly',
       'shallowRef',
+      'stop',
       'toRaw',
       'toRef',
       'toRefs',
@@ -65,6 +84,12 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
       'watch',
       'watchEffect',
 
+      // effect
+      'effect',
+      'effectScope',
+      'getCurrentScope',
+      'onScopeDispose',
+
       // Component
       'defineComponent',
       'defineAsyncComponent',
@@ -73,7 +98,11 @@ export const Nuxt3AutoImports: AutoImportSource[] = [
       'inject',
       'nextTick',
       'provide',
-      'useCssModule'
+      'useAttrs',
-    ]
+      'useCssModule',
+      'useCssVars',
+      'useSlots',
+      'useTransitionState'
+    ] as Array<keyof typeof import('vue')>
   }
 ]

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

@@ -1,7 +1,9 @@
 import type { AutoImport } from '@nuxt/kit'
 import { expect } from 'chai'
+import * as VueFunctions from 'vue'
 import { AutoImportContext, updateAutoImportContext } from '../src/auto-imports/context'
 import { TransformPlugin } from '../src/auto-imports/transform'
+import { Nuxt3AutoImports } from '../src/auto-imports/imports'
 
 describe('auto-imports:transform', () => {
   const autoImports: AutoImport[] = [
@@ -34,3 +36,102 @@ describe('auto-imports:transform', () => {
     expect(result).to.equal('import { computed } from \'bar\';// import { computed } from "foo"\n;const a = computed(0)')
   })
 })
+
+const excludedVueHelpers = [
+  'EffectScope',
+  'ReactiveEffect',
+  'stop',
+  'camelize',
+  'capitalize',
+  'normalizeClass',
+  'normalizeProps',
+  'normalizeStyle',
+  'toDisplayString',
+  'toHandlerKey',
+  'BaseTransition',
+  'Comment',
+  'Fragment',
+  'KeepAlive',
+  'Static',
+  'Suspense',
+  'Teleport',
+  'Text',
+  'callWithAsyncErrorHandling',
+  'callWithErrorHandling',
+  'cloneVNode',
+  'compatUtils',
+  'createBlock',
+  'createCommentVNode',
+  'createElementBlock',
+  'createElementVNode',
+  'createHydrationRenderer',
+  'createPropsRestProxy',
+  'createRenderer',
+  'createSlots',
+  'createStaticVNode',
+  'createTextVNode',
+  'createVNode',
+  'getTransitionRawChildren',
+  'guardReactiveProps',
+  'handleError',
+  'initCustomFormatter',
+  'isMemoSame',
+  'isRuntimeOnly',
+  'isVNode',
+  'mergeDefaults',
+  'mergeProps',
+  'openBlock',
+  'popScopeId',
+  'pushScopeId',
+  'queuePostFlushCb',
+  'registerRuntimeCompiler',
+  'renderList',
+  'renderSlot',
+  'resolveComponent',
+  'resolveDirective',
+  'resolveDynamicComponent',
+  'resolveFilter',
+  'resolveTransitionHooks',
+  'setBlockTracking',
+  'setDevtoolsHook',
+  'setTransitionHooks',
+  'ssrContextKey',
+  'ssrUtils',
+  'toHandlers',
+  'transformVNodeArgs',
+  'useSSRContext',
+  'version',
+  'warn',
+  'watchPostEffect',
+  'watchSyncEffect',
+  'withAsyncContext',
+  'Transition',
+  'TransitionGroup',
+  'VueElement',
+  'createApp',
+  'createSSRApp',
+  'defineCustomElement',
+  'defineSSRCustomElement',
+  'hydrate',
+  'initDirectivesForSSR',
+  'render',
+  'useCssVars',
+  'vModelCheckbox',
+  'vModelDynamic',
+  'vModelRadio',
+  'vModelSelect',
+  'vModelText',
+  'vShow',
+  'compile'
+]
+
+describe('auto-imports:vue', () => {
+  for (const name of Object.keys(VueFunctions)) {
+    if (excludedVueHelpers.includes(name)) {
+      continue
+    }
+    it(`should register ${name} globally`, () => {
+      expect(Nuxt3AutoImports.find(a => a.from === 'vue').names).to.include(name)
+    })
+  }
+})