vuejs · KazariEX · Dec 3, 2025
diff --git a/packages/language-core/lib/codegen/script/component.ts b/packages/language-core/lib/codegen/script/component.ts
@@ -2,7 +2,7 @@ import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc } from '../../types';
 import { codeFeatures } from '../codeFeatures';
 import * as names from '../names';
-import { generateSfcBlockSection, newLine } from '../utils';
+import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
 import { generateIntersectMerge, generateSpreadMerge } from '../utils/merge';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
@@ -12,19 +12,9 @@ export function* generateComponent(
 	ctx: ScriptCodegenContext,
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	scriptSetupRanges: ScriptSetupRanges,
+	outputRaw?: boolean,
 ): Generator<Code> {
-	if (
-		options.script
-		&& options.scriptRanges?.componentOptions
-		&& options.scriptRanges.componentOptions.expression.start !== options.scriptRanges.componentOptions.args.start
-	) {
-		// use defineComponent() from user space code if it exist
-		yield* generateSfcBlockSection(
-			options.script,
-			options.scriptRanges.componentOptions.expression.start,
-			options.scriptRanges.componentOptions.args.start,
-			codeFeatures.all,
-		);
+	if (outputRaw) {
 		yield `{${newLine}`;
 	}
 	else {
@@ -60,11 +50,47 @@ export function* generateComponent(
 	) {
 		yield `__typeEl: {} as ${names.RootEl},${newLine}`;
 	}
-	if (options.script && options.scriptRanges?.componentOptions?.args) {
-		const { args } = options.scriptRanges.componentOptions;
-		yield* generateSfcBlockSection(options.script, args.start + 1, args.end - 1, codeFeatures.all);
+	if (hasSlotsType(options)) {
+		yield `slots: {} as ${
+			options.vueCompilerOptions.target >= 3.3
+				? `import('${options.vueCompilerOptions.lib}').SlotsType<${names.Slots}>`
+				: names.Slots
+		},${newLine}`;
+	}
+
+	if (outputRaw) {
+		yield `}`;
+	}
+	else {
+		yield `})`;
+	}
+}
+
+export function* generateWithSlots(
+	options: ScriptCodegenOptions,
+	ctx: ScriptCodegenContext,
+	body: Iterable<Code>,
+	output: Iterable<Code>,
+): Generator<Code> {
+	if (options.vueCompilerOptions.target < 3.3 && hasSlotsType(options)) {
+		yield `const __VLS_base = `;
+		yield* body;
+		yield endOfLine;
+		yield* output;
+		yield `{} as ${ctx.localTypes.WithSlots}<typeof __VLS_base, __VLS_base.slots>${endOfLine}`;
+	}
+	else {
+		yield* output;
+		yield* body;
+		yield endOfLine;
 	}
-	yield `})`;
+}
+
+export function hasSlotsType(options: ScriptCodegenOptions) {
+	return !!(
+		options.scriptSetupRanges?.defineSlots
+		|| options.templateCodegen?.generatedTypes.has(names.Slots)
+	);
 }
 
 function* generateEmitsOption(

diff --git a/packages/language-core/lib/codegen/script/index.ts b/packages/language-core/lib/codegen/script/index.ts
@@ -8,8 +8,14 @@ import * as names from '../names';
 import type { TemplateCodegenContext } from '../template/context';
 import { endOfLine, generateSfcBlockSection, newLine } from '../utils';
 import { endBoundary, startBoundary } from '../utils/boundary';
+import { generateComponent, generateWithSlots } from './component';
 import { createScriptCodegenContext, type ScriptCodegenContext } from './context';
-import { generateGeneric, generateScriptSetupImports, generateSetupFunction } from './scriptSetup';
+import {
+	generateGeneric,
+	generateScriptAndScriptSetup,
+	generateScriptSetup,
+	generateScriptSetupImports,
+} from './scriptSetup';
 import { generateSrc } from './src';
 import { generateTemplate } from './template';
 
@@ -69,15 +75,15 @@ function* generateWorker(
 		}
 
 		// <script setup>
-		yield* generateExportDeclareEqual(scriptSetup);
 		if (scriptSetup.generic) {
+			yield* generateExportDeclareEqual(scriptSetup);
 			yield* generateGeneric(
 				options,
 				ctx,
 				scriptSetup,
 				scriptSetupRanges,
 				scriptSetup.generic,
-				generateSetupFunction(
+				generateScriptSetup(
 					options,
 					ctx,
 					scriptSetup,
@@ -87,16 +93,20 @@ function* generateWorker(
 			);
 		}
 		else {
-			yield `await (async () => {${newLine}`;
-			yield* generateSetupFunction(
+			yield* generateWithSlots(
 				options,
 				ctx,
-				scriptSetup,
-				scriptSetupRanges,
-				generateTemplate(options, ctx),
-				[`return `],
+				generateScriptAndScriptSetup(
+					options,
+					ctx,
+					script,
+					scriptRanges,
+					scriptSetup,
+					scriptSetupRanges,
+					generateTemplate(options, ctx),
+				),
+				generateExportDeclareEqual(scriptSetup),
 			);
-			yield `})()${endOfLine}`;
 		}
 	}
 	// only <script setup>
@@ -109,7 +119,7 @@ function* generateWorker(
 				scriptSetup,
 				scriptSetupRanges,
 				scriptSetup.generic,
-				generateSetupFunction(
+				generateScriptSetup(
 					options,
 					ctx,
 					scriptSetup,
@@ -120,12 +130,17 @@ function* generateWorker(
 		}
 		else {
 			// no script block, generate script setup code at root
-			yield* generateSetupFunction(
+			yield* generateScriptSetup(
 				options,
 				ctx,
 				scriptSetup,
 				scriptSetupRanges,
 				generateTemplate(options, ctx),
+			);
+			yield* generateWithSlots(
+				options,
+				ctx,
+				generateComponent(options, ctx, scriptSetup, scriptSetupRanges),
 				generateExportDeclareEqual(scriptSetup),
 			);
 		}

diff --git a/packages/language-core/lib/codegen/script/scriptSetup.ts b/packages/language-core/lib/codegen/script/scriptSetup.ts
@@ -1,4 +1,5 @@
 import { camelize } from '@vue/shared';
+import type { ScriptRanges } from '../../parsers/scriptRanges';
 import type { ScriptSetupRanges } from '../../parsers/scriptSetupRanges';
 import type { Code, Sfc, TextRange } from '../../types';
 import { codeFeatures } from '../codeFeatures';
@@ -7,7 +8,7 @@ import { endOfLine, generateSfcBlockSection, identifierRegex, newLine } from '..
 import { endBoundary, startBoundary } from '../utils/boundary';
 import { generateCamelized } from '../utils/camelized';
 import { type CodeTransform, generateCodeWithTransforms, insert, replace } from '../utils/transform';
-import { generateComponent } from './component';
+import { generateComponent, hasSlotsType } from './component';
 import type { ScriptCodegenContext } from './context';
 import type { ScriptCodegenOptions } from './index';
 
@@ -122,13 +123,63 @@ export function* generateGeneric(
 	yield `) => ({} as import('${vueCompilerOptions.lib}').VNode & { __ctx?: Awaited<typeof ${names.setup}> }))${endOfLine}`;
 }
 
-export function* generateSetupFunction(
+export function* generateScriptAndScriptSetup(
+	options: ScriptCodegenOptions,
+	ctx: ScriptCodegenContext,
+	script: NonNullable<Sfc['script']>,
+	scriptRanges: ScriptRanges,
+	scriptSetup: NonNullable<Sfc['scriptSetup']>,
+	scriptSetupRanges: ScriptSetupRanges,
+	body: Iterable<Code>,
+): Generator<Code> {
+	if (
+		scriptRanges.componentOptions
+		&& scriptRanges.componentOptions.expression.start !== scriptRanges.componentOptions.args.start
+	) {
+		// use defineComponent() from user space code if it exist
+		yield* generateSfcBlockSection(
+			script,
+			scriptRanges.componentOptions.expression.start,
+			scriptRanges.componentOptions.args.start,
+			codeFeatures.all,
+		);
+		yield `{${newLine}`;
+	}
+	else {
+		yield `(await import('${options.vueCompilerOptions.lib}')).defineComponent({${newLine}`;
+	}
+
+	yield `...await (async () => {${newLine}`;
+	yield* generateSetupBody(options, ctx, scriptSetup, scriptSetupRanges, body);
+	yield `return `;
+	yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges, true);
+	yield endOfLine;
+	yield `})(),${newLine}`;
+
+	if (scriptRanges.componentOptions?.args) {
+		const { args } = scriptRanges.componentOptions;
+		yield* generateSfcBlockSection(script, args.start + 1, args.end - 1, codeFeatures.all);
+	}
+
+	yield `})${endOfLine}`;
+}
+
+export function* generateScriptSetup(
+	options: ScriptCodegenOptions,
+	ctx: ScriptCodegenContext,
+	scriptSetup: NonNullable<Sfc['scriptSetup']>,
+	scriptSetupRanges: ScriptSetupRanges,
+	body: Iterable<Code>,
+): Generator<Code> {
+	yield* generateSetupBody(options, ctx, scriptSetup, scriptSetupRanges, body);
+}
+
+function* generateSetupBody(
 	options: ScriptCodegenOptions,
 	ctx: ScriptCodegenContext,
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	scriptSetupRanges: ScriptSetupRanges,
 	body: Iterable<Code>,
-	output?: Iterable<Code>,
 ): Generator<Code> {
 	const transforms: CodeTransform[] = [];
 
@@ -281,21 +332,6 @@ export function* generateSetupFunction(
 	yield* generateModels(scriptSetup, scriptSetupRanges);
 	yield* generatePublicProps(options, ctx, scriptSetup, scriptSetupRanges);
 	yield* body;
-
-	if (output) {
-		if (hasSlotsType(options)) {
-			yield `const __VLS_base = `;
-			yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges);
-			yield endOfLine;
-			yield* output;
-			yield `{} as ${ctx.localTypes.WithSlots}<typeof __VLS_base, ${names.Slots}>${endOfLine}`;
-		}
-		else {
-			yield* output;
-			yield* generateComponent(options, ctx, scriptSetup, scriptSetupRanges);
-			yield endOfLine;
-		}
-	}
 }
 
 function* generateMacros(options: ScriptCodegenOptions): Generator<Code> {
@@ -403,13 +439,6 @@ function* generatePublicProps(
 	}
 }
 
-function hasSlotsType(options: ScriptCodegenOptions): boolean {
-	return !!(
-		options.scriptSetupRanges?.defineSlots
-		|| options.templateCodegen?.generatedTypes.has(names.Slots)
-	);
-}
-
 function* generateModels(
 	scriptSetup: NonNullable<Sfc['scriptSetup']>,
 	scriptSetupRanges: ScriptSetupRanges,

diff --git a/packages/language-core/lib/codegen/script/template.ts b/packages/language-core/lib/codegen/script/template.ts
@@ -30,7 +30,7 @@ function* generateSelf({ script, scriptRanges, vueCompilerOptions, fileName }: S
 	if (script && scriptRanges?.componentOptions) {
 		yield `const ${names.self} = (await import('${vueCompilerOptions.lib}')).defineComponent(`;
 		const { args } = scriptRanges.componentOptions;
-		yield* generateSfcBlockSection(script, args.start, args.end, codeFeatures.all);
+		yield* generateSfcBlockSection(script, args.start, args.end, codeFeatures.navigation);
 		yield `)${endOfLine}`;
 	}
 	else if (script && scriptRanges?.exportDefault) {

diff --git a/packages/tsc/tests/__snapshots__/dts.spec.ts.snap b/packages/tsc/tests/__snapshots__/dts.spec.ts.snap
@@ -770,7 +770,7 @@ type __VLS_Slots = {} & {
 } & {
     vbind?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent2<{
+declare const __VLS_export: import("vue").DefineComponent2<{
     setup(): {};
     data(): {};
     props: {};
@@ -779,7 +779,7 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     mixins: {}[];
     extends: {};
     emits: string[];
-    slots: {};
+    slots: import("vue").SlotsType<__VLS_Slots>;
     inject: {};
     components: {};
     directives: {};
@@ -791,14 +791,8 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     __typeEl: any;
     __defaults: unknown;
 }>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 "
 `;
 
@@ -817,7 +811,7 @@ type __VLS_Slots = {
     }) => VNode[];
     'no-bind': () => VNode[];
 };
-declare const __VLS_base: import("vue").DefineComponent2<{
+declare const __VLS_export: import("vue").DefineComponent2<{
     setup(): {};
     data(): {};
     props: {};
@@ -826,7 +820,7 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     mixins: {}[];
     extends: {};
     emits: string[];
-    slots: {};
+    slots: import("vue").SlotsType<__VLS_Slots>;
     inject: {};
     components: {};
     directives: {};
@@ -838,14 +832,8 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     __typeEl: any;
     __defaults: unknown;
 }>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 "
 `;
 
@@ -867,7 +855,7 @@ type __VLS_Slots = {} & {
 } & {
     vbind?: (props: typeof __VLS_7) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent2<{
+declare const __VLS_export: import("vue").DefineComponent2<{
     setup(): {};
     data(): {};
     props: {};
@@ -876,7 +864,7 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     mixins: {}[];
     extends: {};
     emits: string[];
-    slots: {};
+    slots: import("vue").SlotsType<__VLS_Slots>;
     inject: {};
     components: {};
     directives: {};
@@ -888,14 +876,8 @@ declare const __VLS_base: import("vue").DefineComponent2<{
     __typeEl: any;
     __defaults: unknown;
 }>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
 "
 `;