diff --git a/extensions/vscode/CHANGELOG.md b/extensions/vscode/CHANGELOG.md
index be495c885a..be6fbe0aa6 100644
--- a/extensions/vscode/CHANGELOG.md
+++ b/extensions/vscode/CHANGELOG.md
@@ -1 +1 @@
-For a full change history, refer to the [CHANGELOG](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md) on the Volar GitHub site.
+For a full change history, refer to the [CHANGELOG](https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md) on the GitHub site.
diff --git a/extensions/vscode/package.json b/extensions/vscode/package.json
index 2799749f3a..d57335a054 100644
--- a/extensions/vscode/package.json
+++ b/extensions/vscode/package.json
@@ -15,7 +15,7 @@
 	},
 	"icon": "images/icon.png",
 	"displayName": "Vue Language Features (Volar)",
-	"description": "Language support for Vue 3",
+	"description": "Language Support for Vue",
 	"author": "johnsoncodehk",
 	"publisher": "Vue",
 	"engines": {
@@ -32,15 +32,6 @@
 		"virtualWorkspaces": {
 			"supported": "limited",
 			"description": "Install https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-web to have IntelliSense for .vue files in Web IDE."
-		},
-		"untrustedWorkspaces": {
-			"supported": "limited",
-			"description": "%volar.workspaceTrust.description%",
-			"restrictedConfigurations": [
-				"typescript.tsdk",
-				"typescript.tsserver.pluginPaths",
-				"typescript.npm"
-			]
 		}
 	},
 	"contributes": {
@@ -281,7 +272,7 @@
 		],
 		"configuration": {
 			"type": "object",
-			"title": "Volar",
+			"title": "Vue",
 			"properties": {
 				"vue.trace.server": {
 					"scope": "window",
@@ -483,24 +474,19 @@
 		},
 		"commands": [
 			{
-				"command": "volar.action.doctor",
+				"command": "vue.action.doctor",
 				"title": "Doctor",
-				"category": "Volar"
+				"category": "Vue"
 			},
 			{
-				"command": "volar.action.writeVirtualFiles",
+				"command": "vue.action.writeVirtualFiles",
 				"title": "Write Virtual Files",
-				"category": "Volar (Debug)"
-			},
-			{
-				"command": "volar.action.showComponentMeta",
-				"title": "Show Component Meta",
-				"category": "Volar"
+				"category": "Vue (Debug)"
 			},
 			{
-				"command": "volar.action.splitEditors",
+				"command": "vue.action.splitEditors",
 				"title": "Split <script>, <template>, <style> Editors",
-				"category": "Volar",
+				"category": "Vue",
 				"icon": "images/split-editors.png"
 			}
 		],
@@ -535,21 +521,21 @@
 					"when": "editorLangId == vue"
 				},
 				{
-					"command": "volar.action.doctor",
-					"when": "volar.activated"
+					"command": "vue.action.doctor",
+					"when": "vue.activated"
 				},
 				{
-					"command": "volar.action.writeVirtualFiles",
-					"when": "volar.activated"
+					"command": "vue.action.writeVirtualFiles",
+					"when": "vue.activated"
 				},
 				{
-					"command": "volar.action.splitEditors",
+					"command": "vue.action.splitEditors",
 					"when": "editorLangId == vue"
 				}
 			],
 			"editor/title": [
 				{
-					"command": "volar.action.splitEditors",
+					"command": "vue.action.splitEditors",
 					"when": "resourceLangId == vue && config.vue.splitEditors.icon",
 					"group": "navigation"
 				}
diff --git a/extensions/vscode/package.nls.json b/extensions/vscode/package.nls.json
deleted file mode 100644
index f76c6c19c3..0000000000
--- a/extensions/vscode/package.nls.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-	"volar.workspaceTrust.description": "Workspace must be trusted for Volar to work properly."
-}
\ No newline at end of file
diff --git a/extensions/vscode/src/common.ts b/extensions/vscode/src/common.ts
index 1f6b2e0c2c..613089be1e 100644
--- a/extensions/vscode/src/common.ts
+++ b/extensions/vscode/src/common.ts
@@ -9,9 +9,8 @@ import { DiagnosticModel, VueInitializationOptions } from '@vue/language-server'
 import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient';
 import { config } from './config';
-// import * as componentMeta from './features/componentMeta';
-// import * as doctor from './features/doctor';
-// import * as nameCasing from './features/nameCasing';
+import * as doctor from './features/doctor';
+import * as nameCasing from './features/nameCasing';
 import * as splitEditors from './features/splitEditors';
 
 let client: lsp.BaseLanguageClient;
@@ -49,7 +48,7 @@ export async function activate(context: vscode.ExtensionContext, createLc: Creat
 
 async function doActivate(context: vscode.ExtensionContext, createLc: CreateLanguageClient) {
 
-	vscode.commands.executeCommand('setContext', 'volar.activated', true);
+	vscode.commands.executeCommand('setContext', 'vue.activated', true);
 
 	const outputChannel = vscode.window.createOutputChannel('Vue Language Server');
 
@@ -67,8 +66,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	activateClientRequests();
 
 	splitEditors.register(context, client);
-	// doctor.register(context, client);
-	// componentMeta.register(context, client);
+	doctor.register(context, client);
 
 	const selectors: vscode.DocumentFilter[] = [{ language: 'vue' }];
 
@@ -79,10 +77,9 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 		selectors.push({ language: 'markdown' });
 	}
 
-	activateAutoInsertion(selectors, client); // TODO: implement auto insert .value
+	activateAutoInsertion(selectors, client);
 	activateDocumentDropEdit(selectors, client);
-	activateWriteVirtualFiles('volar.action.writeVirtualFiles', client);
-
+	activateWriteVirtualFiles('vue.action.writeVirtualFiles', client);
 	activateServerSys(client);
 
 	async function requestReloadVscode() {
@@ -100,13 +97,13 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 				requestReloadVscode();
 			}
 			if (e.affectsConfiguration('vue')) {
-				vscode.commands.executeCommand('volar.action.restartServer');
+				vscode.commands.executeCommand('vue.action.restartServer');
 			}
 		}));
 	}
 
 	async function activateRestartRequest() {
-		context.subscriptions.push(vscode.commands.registerCommand('volar.action.restartServer', async () => {
+		context.subscriptions.push(vscode.commands.registerCommand('vue.action.restartServer', async () => {
 
 			await client.stop();
 
@@ -121,7 +118,7 @@ async function doActivate(context: vscode.ExtensionContext, createLc: CreateLang
 	}
 
 	function activateClientRequests() {
-		// nameCasing.activate(context, client);
+		nameCasing.activate(context, client);
 	}
 }
 
@@ -154,7 +151,6 @@ async function getInitializationOptions(
 			tokenModifiers: [],
 		},
 		vue: {
-			hybridMode: true,
 			additionalExtensions: [
 				...config.server.additionalExtensions,
 				...!config.server.petiteVue.supportHtmlFile ? [] : ['html'],
diff --git a/extensions/vscode/src/features/componentMeta.ts b/extensions/vscode/src/features/componentMeta.ts
deleted file mode 100644
index 7a6ed61307..0000000000
--- a/extensions/vscode/src/features/componentMeta.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import * as vscode from 'vscode';
-import type { BaseLanguageClient } from 'vscode-languageclient';
-import { GetComponentMeta } from '@vue/language-server';
-
-const scheme = 'vue-component-meta';
-
-export async function register(context: vscode.ExtensionContext, client: BaseLanguageClient) {
-
-	const sourceUriToMetaUri = new Map<string, string>();
-	const metaUriToSourceEditor = new Map<string, vscode.TextEditor>();
-	const docChangeEvent = new vscode.EventEmitter<vscode.Uri>();
-	let updateVirtualDocument: NodeJS.Timeout | undefined;
-
-	context.subscriptions.push(vscode.workspace.onDidChangeTextDocument(e => {
-		const uri = sourceUriToMetaUri.get(e.document.uri.toString());
-		if (uri) {
-			clearTimeout(updateVirtualDocument);
-			updateVirtualDocument = setTimeout(() => {
-				docChangeEvent.fire(vscode.Uri.parse(uri));
-			}, 100);
-		}
-	}));
-	context.subscriptions.push(vscode.workspace.registerTextDocumentContentProvider(
-		scheme,
-		{
-			onDidChange: docChangeEvent.event,
-			async provideTextDocumentContent(uri: vscode.Uri): Promise<string | undefined> {
-
-				const sourceUri = metaUriToSourceEditor.get(uri.toString());
-
-				if (sourceUri) {
-
-					const meta = await client.sendRequest(GetComponentMeta.type, { uri: sourceUri.document.uri.toString() });
-
-					return JSON.stringify(meta, undefined, '\t');
-				}
-			}
-		},
-	));
-	context.subscriptions.push(vscode.commands.registerCommand('volar.action.showComponentMeta', async () => {
-		const sourceEditor = vscode.window.activeTextEditor;
-		if (sourceEditor) {
-			const metaUri = sourceEditor.document.uri.with({ scheme }).toString() + '.meta.json';
-			sourceUriToMetaUri.set(sourceEditor.document.uri.toString(), metaUri);
-			metaUriToSourceEditor.set(metaUri, sourceEditor);
-			vscode.window.showTextDocument(vscode.Uri.parse(metaUri), { viewColumn: vscode.ViewColumn.Two, preview: false });
-		}
-	}));
-}
diff --git a/extensions/vscode/src/features/doctor.ts b/extensions/vscode/src/features/doctor.ts
index ef367339a8..5fce369d61 100644
--- a/extensions/vscode/src/features/doctor.ts
+++ b/extensions/vscode/src/features/doctor.ts
@@ -16,7 +16,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 
 	const item = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
 	item.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');
-	item.command = 'volar.action.doctor';
+	item.command = 'vue.action.doctor';
 
 	const docChangeEvent = new vscode.EventEmitter<vscode.Uri>();
 
@@ -49,7 +49,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 			}
 		},
 	));
-	context.subscriptions.push(vscode.commands.registerCommand('volar.action.doctor', () => {
+	context.subscriptions.push(vscode.commands.registerCommand('vue.action.doctor', () => {
 		const doc = vscode.window.activeTextEditor?.document;
 		if (
 			doc
diff --git a/extensions/vscode/src/features/nameCasing.ts b/extensions/vscode/src/features/nameCasing.ts
index d1a03d96f1..3fa27fe1bc 100644
--- a/extensions/vscode/src/features/nameCasing.ts
+++ b/extensions/vscode/src/features/nameCasing.ts
@@ -13,7 +13,7 @@ export async function activate(_context: vscode.ExtensionContext, client: BaseLa
 
 	const disposes: vscode.Disposable[] = [];
 	const statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
-	statusBar.command = 'volar.action.nameCasing';
+	statusBar.command = 'vue.action.nameCasing';
 
 	update(vscode.window.activeTextEditor?.document);
 
@@ -29,7 +29,7 @@ export async function activate(_context: vscode.ExtensionContext, client: BaseLa
 		attrNameCasings.delete(doc.uri.toString());
 		tagNameCasings.delete(doc.uri.toString());
 	}));
-	disposes.push(vscode.commands.registerCommand('volar.action.nameCasing', async () => {
+	disposes.push(vscode.commands.registerCommand('vue.action.nameCasing', async () => {
 
 		if (!vscode.window.activeTextEditor?.document) return;
 
diff --git a/extensions/vscode/src/features/splitEditors.ts b/extensions/vscode/src/features/splitEditors.ts
index 83b15dc011..63fa3beb07 100644
--- a/extensions/vscode/src/features/splitEditors.ts
+++ b/extensions/vscode/src/features/splitEditors.ts
@@ -9,7 +9,7 @@ export function register(context: vscode.ExtensionContext, client: BaseLanguageC
 
 	const getDocDescriptor = useDocDescriptor();
 
-	context.subscriptions.push(vscode.commands.registerCommand('volar.action.splitEditors', onSplit));
+	context.subscriptions.push(vscode.commands.registerCommand('vue.action.splitEditors', onSplit));
 
 	async function onSplit() {
 
diff --git a/extensions/vscode/src/nodeClientMain.ts b/extensions/vscode/src/nodeClientMain.ts
index 5ad2b50c08..b5eb95f713 100644
--- a/extensions/vscode/src/nodeClientMain.ts
+++ b/extensions/vscode/src/nodeClientMain.ts
@@ -38,7 +38,7 @@ export async function activate(context: vscode.ExtensionContext) {
 				if (!serverPathStatusItem) {
 					serverPathStatusItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right);
 					serverPathStatusItem.text = '[vue] configured server path';
-					serverPathStatusItem.command = 'volar.action.gotoServerFile';
+					serverPathStatusItem.command = 'vue.action.gotoServerFile';
 					serverPathStatusItem.backgroundColor = new vscode.ThemeColor('statusBarItem.warningBackground');
 					serverPathStatusItem.show();
 					vscode.commands.registerCommand(serverPathStatusItem.command, () => {
@@ -106,7 +106,31 @@ export async function activate(context: vscode.ExtensionContext) {
 			serverOptions,
 			clientOptions,
 		);
-		client.start();
+		client.start().then(() => {
+			const legend = client.initializeResult?.capabilities.semanticTokensProvider?.legend;
+			if (!legend) {
+				console.error('Server does not support semantic tokens');
+				return;
+			}
+			// When tsserver has provided semantic tokens for the .vue file, VSCode will no longer request semantic tokens from the Vue language server, so it needs to be provided here again.
+			vscode.languages.registerDocumentSemanticTokensProvider(documentSelector, {
+				async provideDocumentSemanticTokens(document) {
+					const tokens = await client.sendRequest(lsp.SemanticTokensRequest.type, {
+						textDocument: client.code2ProtocolConverter.asTextDocumentIdentifier(document),
+					} satisfies lsp.SemanticTokensParams);
+					return client.protocol2CodeConverter.asSemanticTokens(tokens);
+				},
+			}, legend);
+			vscode.languages.registerDocumentRangeSemanticTokensProvider(documentSelector, {
+				async provideDocumentRangeSemanticTokens(document, range) {
+					const tokens = await client.sendRequest(lsp.SemanticTokensRangeRequest.type, {
+						textDocument: client.code2ProtocolConverter.asTextDocumentIdentifier(document),
+						range: client.code2ProtocolConverter.asRange(range),
+					} satisfies lsp.SemanticTokensRangeParams);
+					return client.protocol2CodeConverter.asSemanticTokens(tokens);
+				},
+			}, legend);
+		});
 
 		volarLabs.addLanguageClient(client);
 
@@ -191,7 +215,7 @@ try {
 			text = text.replace('t.$u=[t.$r,t.$s,t.$p,t.$q]', s => s + '.concat("vue")');
 
 			// patch isSupportedLanguageMode
-			text = text.replace('s.languages.match([t.$p,t.$q,t.$r,t.$s]', s => s + '.concat("vue")');
+			text = text.replace('.languages.match([t.$p,t.$q,t.$r,t.$s]', s => s + '.concat("vue")');
 
 			return text;
 		}
diff --git a/packages/language-server/package.json b/packages/language-server/package.json
index f59db70a08..2097981d8f 100644
--- a/packages/language-server/package.json
+++ b/packages/language-server/package.json
@@ -20,7 +20,6 @@
 		"@volar/language-server": "~2.1.0",
 		"@vue/language-core": "1.8.27",
 		"@vue/language-service": "1.8.27",
-		"vscode-languageserver-protocol": "^3.17.5",
-		"vue-component-meta": "1.8.27"
+		"vscode-languageserver-protocol": "^3.17.5"
 	}
 }
diff --git a/packages/language-server/src/nodeServer.ts b/packages/language-server/src/nodeServer.ts
index 3dd51fc7bf..ebb4ee08a6 100644
--- a/packages/language-server/src/nodeServer.ts
+++ b/packages/language-server/src/nodeServer.ts
@@ -1,14 +1,14 @@
-import { ServerProject } from '@volar/language-server';
-import { createConnection, createServer, createSimpleProjectProviderFactory, createTypeScriptProjectProviderFactory, loadTsdkByPath } from '@volar/language-server/node';
+import { Connection } from '@volar/language-server';
+import { createConnection, createServer, createSimpleProjectProviderFactory, loadTsdkByPath } from '@volar/language-server/node';
 import { ParsedCommandLine, VueCompilerOptions, createParsedCommandLine, createVueLanguagePlugin, parse, resolveVueCompilerOptions } from '@vue/language-core';
 import { ServiceEnvironment, convertAttrName, convertTagName, createVueServicePlugins, detect } from '@vue/language-service';
-import { ComponentMetaChecker, baseCreate } from 'vue-component-meta/out/base';
-import { DetectNameCasingRequest, GetComponentMeta, GetConvertAttrCasingEditsRequest, GetConvertTagCasingEditsRequest, ParseSFCRequest } from './protocol';
+import { DetectNameCasingRequest, GetConvertAttrCasingEditsRequest, GetConvertTagCasingEditsRequest, ParseSFCRequest } from './protocol';
 import { VueInitializationOptions } from './types';
 
-const connection = createConnection();
-const server = createServer(connection);
-const checkers = new WeakMap<ServerProject, ComponentMetaChecker>();
+export const connection: Connection = createConnection();
+
+export const server = createServer(connection);
+
 const envToVueOptions = new WeakMap<ServiceEnvironment, VueCompilerOptions>();
 
 let tsdk: ReturnType<typeof loadTsdkByPath>;
@@ -31,9 +31,7 @@ connection.onInitialize(params => {
 
 	return server.initialize(
 		params,
-		options.vue?.hybridMode
-			? createSimpleProjectProviderFactory()
-			: createTypeScriptProjectProviderFactory(tsdk.typescript, tsdk.diagnosticMessages),
+		createSimpleProjectProviderFactory(),
 		{
 			watchFileExtensions: ['js', 'cjs', 'mjs', 'ts', 'cts', 'mts', 'jsx', 'tsx', 'json', ...vueFileExtensions],
 			getServicePlugins() {
@@ -100,45 +98,22 @@ connection.onRequest(ParseSFCRequest.type, params => {
 connection.onRequest(DetectNameCasingRequest.type, async params => {
 	const languageService = await getService(params.textDocument.uri);
 	if (languageService) {
-		return detect(tsdk.typescript, languageService.context, params.textDocument.uri, envToVueOptions.get(languageService.context.env)!);
+		return await detect(languageService.context, params.textDocument.uri);
 	}
 });
 
 connection.onRequest(GetConvertTagCasingEditsRequest.type, async params => {
 	const languageService = await getService(params.textDocument.uri);
 	if (languageService) {
-		return convertTagName(tsdk.typescript, languageService.context, params.textDocument.uri, params.casing, envToVueOptions.get(languageService.context.env)!);
+		return await convertTagName(languageService.context, params.textDocument.uri, params.casing);
 	}
 });
 
 connection.onRequest(GetConvertAttrCasingEditsRequest.type, async params => {
 	const languageService = await getService(params.textDocument.uri);
 	if (languageService) {
-		const vueOptions = envToVueOptions.get(languageService.context.env);
-		if (vueOptions) {
-			return convertAttrName(tsdk.typescript, languageService.context, params.textDocument.uri, params.casing, envToVueOptions.get(languageService.context.env)!);
-		}
-	}
-});
-
-connection.onRequest(GetComponentMeta.type, async params => {
-
-	const project = await server.projects.getProject(params.uri);
-	const langaugeService = project.getLanguageService();
-
-	let checker = checkers.get(project);
-	if (!checker) {
-		checker = baseCreate(
-			tsdk.typescript,
-			langaugeService.context.language.typescript!.configFileName,
-			langaugeService.context.language.typescript!.projectHost,
-			envToVueOptions.get(langaugeService.context.env)!,
-			{},
-			langaugeService.context.language.typescript!.languageServiceHost.getCurrentDirectory() + '/tsconfig.json.global.vue',
-		);
-		checkers.set(project, checker);
+		return await convertAttrName(languageService.context, params.textDocument.uri, params.casing);
 	}
-	return checker?.getComponentMeta(langaugeService.context.env.typescript!.uriToFileName(params.uri));
 });
 
 async function getService(uri: string) {
diff --git a/packages/language-server/src/protocol.ts b/packages/language-server/src/protocol.ts
index a36d7c0752..3221f01557 100644
--- a/packages/language-server/src/protocol.ts
+++ b/packages/language-server/src/protocol.ts
@@ -1,13 +1,5 @@
 import * as vscode from 'vscode-languageserver-protocol';
 import { TagNameCasing, AttrNameCasing, SFCParseResult } from '@vue/language-service';
-import { ComponentMeta } from 'vue-component-meta';
-
-export namespace GetComponentMeta {
-	export type ParamsType = vscode.TextDocumentIdentifier;
-	export type ResponseType = ComponentMeta | null | undefined;
-	export type ErrorType = never;
-	export const type = new vscode.RequestType<ParamsType, ResponseType, ErrorType>('vue/componentMeta');
-}
 
 export namespace DetectNameCasingRequest {
 	export type ParamsType = {
diff --git a/packages/language-server/src/types.ts b/packages/language-server/src/types.ts
index 4736cd7b7f..7cc825c277 100644
--- a/packages/language-server/src/types.ts
+++ b/packages/language-server/src/types.ts
@@ -2,14 +2,12 @@ import { InitializationOptions } from "@volar/language-server";
 
 export type VueInitializationOptions = InitializationOptions & {
 	typescript: {
-		tsdk?: string;
-		tsdkUrl?: string;
+		tsdk: string;
 	}
 	vue?: {
 		/**
 		 * @example ['vue1', 'vue2']
 		 */
 		additionalExtensions?: string[];
-		hybridMode?: boolean;
 	};
 };
diff --git a/packages/language-service/package.json b/packages/language-service/package.json
index e99be708f1..3571769762 100644
--- a/packages/language-service/package.json
+++ b/packages/language-service/package.json
@@ -25,6 +25,7 @@
 		"@vue/shared": "^3.4.0",
 		"computeds": "^0.0.1",
 		"path-browserify": "^1.0.1",
+		"typescript-vue-plugin": "1.8.27",
 		"volar-service-css": "0.0.31",
 		"volar-service-emmet": "0.0.31",
 		"volar-service-html": "0.0.31",
diff --git a/packages/language-service/src/ideFeatures/nameCasing.ts b/packages/language-service/src/ideFeatures/nameCasing.ts
index 675f97537f..fa24fe39d4 100644
--- a/packages/language-service/src/ideFeatures/nameCasing.ts
+++ b/packages/language-service/src/ideFeatures/nameCasing.ts
@@ -1,17 +1,13 @@
 import { ServiceContext, VirtualCode } from '@volar/language-service';
-import { VueCompilerOptions, VueGeneratedCode, hyphenateAttr, hyphenateTag } from '@vue/language-core';
-import type { Provide } from 'volar-service-typescript';
+import type { CompilerDOM } from '@vue/language-core';
+import * as vue from '@vue/language-core';
+import { VueGeneratedCode, hyphenateAttr, hyphenateTag } from '@vue/language-core';
+import { computed } from 'computeds';
+import * as namedPipeClient from 'typescript-vue-plugin/out/namedPipe/client';
 import type * as vscode from 'vscode-languageserver-protocol';
-import { getComponentNames, getPropsByTag, getTemplateTagsAndAttrs } from '../helpers';
 import { AttrNameCasing, TagNameCasing } from '../types';
 
-export async function convertTagName(
-	ts: typeof import('typescript'),
-	context: ServiceContext,
-	uri: string,
-	casing: TagNameCasing,
-	vueCompilerOptions: VueCompilerOptions,
-) {
+export async function convertTagName(context: ServiceContext, uri: string, casing: TagNameCasing) {
 
 	const sourceFile = context.language.files.get(uri);
 	if (!sourceFile)
@@ -25,16 +21,10 @@ export async function convertTagName(
 	if (!desc.template)
 		return;
 
-	const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
 	const template = desc.template;
 	const document = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot);
 	const edits: vscode.TextEdit[] = [];
-	const components = getComponentNames(
-		ts,
-		languageService,
-		rootCode,
-		vueCompilerOptions,
-	);
+	const components = await namedPipeClient.getComponentNames(rootCode.fileName) ?? [];
 	const tags = getTemplateTagsAndAttrs(rootCode);
 
 	for (const [tagName, { offsets }] of tags) {
@@ -57,13 +47,7 @@ export async function convertTagName(
 	return edits;
 }
 
-export async function convertAttrName(
-	ts: typeof import('typescript'),
-	context: ServiceContext,
-	uri: string,
-	casing: AttrNameCasing,
-	vueCompilerOptions: VueCompilerOptions,
-) {
+export async function convertAttrName(context: ServiceContext, uri: string, casing: AttrNameCasing) {
 
 	const sourceFile = context.language.files.get(uri);
 	if (!sourceFile)
@@ -77,17 +61,16 @@ export async function convertAttrName(
 	if (!desc.template)
 		return;
 
-	const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
 	const template = desc.template;
 	const document = context.documents.get(uri, sourceFile.languageId, sourceFile.snapshot);
 	const edits: vscode.TextEdit[] = [];
-	const components = getComponentNames(ts, languageService, rootCode, vueCompilerOptions);
+	const components = await namedPipeClient.getComponentNames(rootCode.fileName) ?? [];
 	const tags = getTemplateTagsAndAttrs(rootCode);
 
 	for (const [tagName, { attrs }] of tags) {
 		const componentName = components.find(component => component === tagName || hyphenateTag(component) === tagName);
 		if (componentName) {
-			const props = getPropsByTag(ts, languageService, rootCode, componentName, vueCompilerOptions);
+			const props = await namedPipeClient.getComponentProps(rootCode.fileName, componentName) ?? [];
 			for (const [attrName, { offsets }] of attrs) {
 				const propName = props.find(prop => prop === attrName || hyphenateAttr(prop) === attrName);
 				if (propName) {
@@ -110,14 +93,9 @@ export async function convertAttrName(
 	return edits;
 }
 
-export async function getNameCasing(
-	ts: typeof import('typescript'),
-	context: ServiceContext,
-	uri: string,
-	vueCompilerOptions: VueCompilerOptions,
-) {
+export async function getNameCasing(context: ServiceContext, uri: string) {
 
-	const detected = detect(ts, context, uri, vueCompilerOptions);
+	const detected = await detect(context, uri);
 	const [attr, tag] = await Promise.all([
 		context.env.getConfiguration?.<'autoKebab' | 'autoCamel' | 'kebab' | 'camel'>('vue.complete.casing.props', uri),
 		context.env.getConfiguration?.<'autoKebab' | 'autoPascal' | 'kebab' | 'pascal'>('vue.complete.casing.tags', uri),
@@ -131,28 +109,21 @@ export async function getNameCasing(
 	};
 }
 
-export function detect(
-	ts: typeof import('typescript'),
-	context: ServiceContext,
-	uri: string,
-	vueCompilerOptions: VueCompilerOptions,
-): {
+export async function detect(context: ServiceContext, uri: string): Promise<{
 	tag: TagNameCasing[],
 	attr: AttrNameCasing[],
-} {
+}> {
 
 	const rootFile = context.language.files.get(uri)?.generated?.code;
-	if (!(rootFile instanceof VueGeneratedCode) || !context.language.typescript) {
+	if (!(rootFile instanceof VueGeneratedCode)) {
 		return {
 			tag: [],
 			attr: [],
 		};
 	}
 
-	const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-
 	return {
-		tag: getTagNameCase(rootFile),
+		tag: await getTagNameCase(rootFile),
 		attr: getAttrNameCase(rootFile),
 	};
 
@@ -180,9 +151,9 @@ export function detect(
 
 		return result;
 	}
-	function getTagNameCase(file: VueGeneratedCode): TagNameCasing[] {
+	async function getTagNameCase(file: VueGeneratedCode): Promise<TagNameCasing[]> {
 
-		const components = getComponentNames(ts, languageService, file, vueCompilerOptions);
+		const components = await namedPipeClient.getComponentNames(file.fileName) ?? [];
 		const tagNames = getTemplateTagsAndAttrs(file);
 		const result: TagNameCasing[] = [];
 
@@ -217,3 +188,73 @@ export function detect(
 		return result;
 	}
 }
+
+type Tags = Map<string, {
+	offsets: number[];
+	attrs: Map<string, {
+		offsets: number[];
+	}>,
+}>;
+
+const map = new WeakMap<VirtualCode, () => Tags | undefined>();
+
+function getTemplateTagsAndAttrs(sourceFile: VirtualCode): Tags {
+
+	if (!map.has(sourceFile)) {
+		const getter = computed(() => {
+			if (!(sourceFile instanceof vue.VueGeneratedCode))
+				return;
+			const ast = sourceFile.sfc.template?.ast;
+			const tags: Tags = new Map();
+			if (ast) {
+				for (const node of vue.eachElementNode(ast)) {
+
+					if (!tags.has(node.tag)) {
+						tags.set(node.tag, { offsets: [], attrs: new Map() });
+					}
+
+					const tag = tags.get(node.tag)!;
+					const startTagHtmlOffset = node.loc.start.offset + node.loc.source.indexOf(node.tag);
+					const endTagHtmlOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
+
+					tag.offsets.push(startTagHtmlOffset);
+					if (!node.isSelfClosing) {
+						tag.offsets.push(endTagHtmlOffset);
+					}
+
+					for (const prop of node.props) {
+
+						let name: string | undefined;
+						let offset: number | undefined;
+
+						if (
+							prop.type === 7 satisfies CompilerDOM.NodeTypes.DIRECTIVE
+							&& prop.arg?.type === 4 satisfies CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
+							&& prop.arg.isStatic
+						) {
+							name = prop.arg.content;
+							offset = prop.arg.loc.start.offset;
+						}
+						else if (
+							prop.type === 6 satisfies CompilerDOM.NodeTypes.ATTRIBUTE
+						) {
+							name = prop.name;
+							offset = prop.loc.start.offset;
+						}
+
+						if (name !== undefined && offset !== undefined) {
+							if (!tag.attrs.has(name)) {
+								tag.attrs.set(name, { offsets: [] });
+							}
+							tag.attrs.get(name)!.offsets.push(offset);
+						}
+					}
+				}
+			}
+			return tags;
+		});
+		map.set(sourceFile, getter);
+	}
+
+	return map.get(sourceFile)!() ?? new Map();
+}
diff --git a/packages/language-service/src/plugins/typescript.ts b/packages/language-service/src/plugins/typescript.ts
index 0982136dae..c4d0b698cc 100644
--- a/packages/language-service/src/plugins/typescript.ts
+++ b/packages/language-service/src/plugins/typescript.ts
@@ -1,18 +1,33 @@
 import { ServiceEnvironment, ServicePlugin, ServicePluginInstance } from '@volar/language-service';
 import { VueCompilerOptions, VueGeneratedCode, hyphenateTag, scriptRanges } from '@vue/language-core';
 import { capitalize } from '@vue/shared';
-import { Provide as TSProvide, create as baseCreate } from 'volar-service-typescript';
+import * as ts from 'typescript';
+import { create as baseCreate } from 'volar-service-typescript';
 import type { Data } from 'volar-service-typescript/lib/features/completions/basic';
-import type * as vscode from 'vscode-languageserver-protocol';
 import { getNameCasing } from '../ideFeatures/nameCasing';
 import { TagNameCasing } from '../types';
 import { createAddComponentToOptionEdit } from './vue-extract-file';
 
+// TODO: migrate patchs to ts plugin
+
+const asts = new WeakMap<ts.IScriptSnapshot, ts.SourceFile>();
+
+export function getAst(fileName: string, snapshot: ts.IScriptSnapshot, scriptKind?: ts.ScriptKind) {
+	let ast = asts.get(snapshot);
+	if (!ast) {
+		ast = ts.createSourceFile(fileName, snapshot.getText(0, snapshot.getLength()), ts.ScriptTarget.Latest, undefined, scriptKind);
+		asts.set(snapshot, ast);
+	}
+	return ast;
+}
+
 export function create(
 	ts: typeof import('typescript'),
 	getVueOptions: (env: ServiceEnvironment) => VueCompilerOptions,
 ): ServicePlugin {
+
 	const base = baseCreate(ts);
+
 	return {
 		...base,
 		create(context): ServicePluginInstance {
@@ -50,7 +65,7 @@ export function create(
 										}
 
 										// fix #2458
-										casing ??= await getNameCasing(ts, context, sourceFile.id, getVueOptions(context.env));
+										casing ??= await getNameCasing(context, sourceFile.id);
 
 										if (casing.tag === TagNameCasing.Kebab) {
 											for (const item of result.items) {
@@ -72,10 +87,6 @@ export function create(
 
 					let newName: string | undefined;
 
-					if (itemData?.uri && item.additionalTextEdits) {
-						patchAdditionalTextEdits(itemData.uri, item.additionalTextEdits);
-					}
-
 					for (const ext of getVueOptions(context.env).extensions) {
 						const suffix = capitalize(ext.substring('.'.length)); // .vue -> Vue
 						if (
@@ -103,7 +114,7 @@ export function create(
 							item.textEdit.newText = newName;
 							const [_, sourceFile] = context.documents.getVirtualCodeByUri(itemData.uri);
 							if (sourceFile) {
-								const casing = await getNameCasing(ts, context, sourceFile.id, getVueOptions(context.env));
+								const casing = await getNameCasing(context, sourceFile.id);
 								if (casing.tag === TagNameCasing.Kebab) {
 									item.textEdit.newText = hyphenateTag(item.textEdit.newText);
 								}
@@ -117,22 +128,26 @@ export function create(
 
 					const data: Data = item.data;
 					if (item.data?.__isComponentAutoImport && data && item.additionalTextEdits?.length && item.textEdit && itemData?.uri) {
-						const langaugeService = context.inject<TSProvide, 'typescript/languageService'>('typescript/languageService');
-						const [virtualCode] = context.documents.getVirtualCodeByUri(itemData.uri);
-						const ast = langaugeService.getProgram()?.getSourceFile(itemData.uri);
-						const exportDefault = ast ? scriptRanges.parseScriptRanges(ts, ast, false, true).exportDefault : undefined;
-						if (virtualCode && ast && exportDefault) {
-							const componentName = newName ?? item.textEdit.newText;
-							const optionEdit = createAddComponentToOptionEdit(ts, ast, componentName);
-							if (optionEdit) {
-								const textDoc = context.documents.get(context.documents.getVirtualCodeUri(context.language.files.getByVirtualCode(virtualCode).id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
-								item.additionalTextEdits.push({
-									range: {
-										start: textDoc.positionAt(optionEdit.range.start),
-										end: textDoc.positionAt(optionEdit.range.end),
-									},
-									newText: optionEdit.newText,
-								});
+						const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(itemData.uri);
+						if (virtualCode && (sourceFile.generated?.code instanceof VueGeneratedCode)) {
+							const script = sourceFile.generated.languagePlugin.typescript?.getScript(sourceFile.generated.code);
+							if (script) {
+								const ast = getAst(sourceFile.generated.code.fileName, script.code.snapshot, script.scriptKind);
+								const exportDefault = scriptRanges.parseScriptRanges(ts, ast, false, true).exportDefault;
+								if (exportDefault) {
+									const componentName = newName ?? item.textEdit.newText;
+									const optionEdit = createAddComponentToOptionEdit(ts, ast, componentName);
+									if (optionEdit) {
+										const textDoc = context.documents.get(context.documents.getVirtualCodeUri(sourceFile.id, virtualCode.id), virtualCode.languageId, virtualCode.snapshot);
+										item.additionalTextEdits.push({
+											range: {
+												start: textDoc.positionAt(optionEdit.range.start),
+												end: textDoc.positionAt(optionEdit.range.end),
+											},
+											newText: optionEdit.newText,
+										});
+									}
+								}
 							}
 						}
 					}
@@ -143,28 +158,6 @@ export function create(
 					const result = await baseInstance.provideCodeActions?.(document, range, context, token);
 					return result?.filter(codeAction => codeAction.title.indexOf('__VLS_') === -1);
 				},
-				async resolveCodeAction(item, token) {
-
-					const result = await baseInstance.resolveCodeAction?.(item, token) ?? item;
-
-					if (result?.edit?.changes) {
-						for (const uri in result.edit.changes) {
-							const edits = result.edit.changes[uri];
-							if (edits) {
-								patchAdditionalTextEdits(uri, edits);
-							}
-						}
-					}
-					if (result?.edit?.documentChanges) {
-						for (const documentChange of result.edit.documentChanges) {
-							if ('textDocument' in documentChange) {
-								patchAdditionalTextEdits(documentChange.textDocument.uri, documentChange.edits);
-							}
-						}
-					}
-
-					return result;
-				},
 				async provideSemanticDiagnostics(document, token) {
 					const result = await baseInstance.provideSemanticDiagnostics?.(document, token);
 					return result?.map(diagnostic => {
@@ -184,24 +177,3 @@ export function create(
 		},
 	};
 }
-
-// fix https://github.com/vuejs/language-tools/issues/916
-function patchAdditionalTextEdits(uri: string, edits: vscode.TextEdit[]) {
-	if (
-		uri.endsWith('.vue.js')
-		|| uri.endsWith('.vue.ts')
-		|| uri.endsWith('.vue.jsx')
-		|| uri.endsWith('.vue.tsx')
-	) {
-		for (const edit of edits) {
-			if (
-				edit.range.start.line === 0
-				&& edit.range.start.character === 0
-				&& edit.range.end.line === 0
-				&& edit.range.end.character === 0
-			) {
-				edit.newText = '\n' + edit.newText;
-			}
-		}
-	}
-}
diff --git a/packages/language-service/src/plugins/vue-autoinsert-dotvalue.ts b/packages/language-service/src/plugins/vue-autoinsert-dotvalue.ts
index f5998485a7..d31533702a 100644
--- a/packages/language-service/src/plugins/vue-autoinsert-dotvalue.ts
+++ b/packages/language-service/src/plugins/vue-autoinsert-dotvalue.ts
@@ -1,9 +1,10 @@
 import { ServicePlugin, ServicePluginInstance } from '@volar/language-service';
 import { hyphenateAttr } from '@vue/language-core';
 import type * as ts from 'typescript';
-import { Provide } from 'volar-service-typescript';
 import type * as vscode from 'vscode-languageserver-protocol';
 import type { TextDocument } from 'vscode-languageserver-textdocument';
+import { getAst } from './typescript';
+import * as namedPipeClient from 'typescript-vue-plugin/out/namedPipe/client';
 
 export function create(ts: typeof import('typescript')): ServicePlugin {
 	return {
@@ -22,53 +23,32 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 					if (!enabled)
 						return;
 
-					const program = context.inject<Provide, 'typescript/languageService'>('typescript/languageService').getProgram();
-					if (!program)
-						return;
-
-					const sourceFile = program.getSourceFile(context.env.typescript!.uriToFileName(document.uri));
-					if (!sourceFile)
-						return;
+					const [_, file] = context.documents.getVirtualCodeByUri(document.uri);
 
-					if (isBlacklistNode(ts, sourceFile, document.offsetAt(position), false))
-						return;
+					let fileName: string | undefined;
+					let ast: ts.SourceFile | undefined;
 
-					const node = findPositionIdentifier(sourceFile, sourceFile, document.offsetAt(position));
-					if (!node)
-						return;
-
-					const token = context.inject<Provide, 'typescript/languageServiceHost'>('typescript/languageServiceHost').getCancellationToken?.();
-					if (token) {
-						context.inject<Provide, 'typescript/languageService'>('typescript/languageService').getQuickInfoAtPosition(context.env.typescript!.uriToFileName(document.uri), node.end);
-						if (token?.isCancellationRequested()) {
-							return; // check cancel here because type checker do not use cancel token
+					if (file?.generated) {
+						const script = file.generated.languagePlugin.typescript?.getScript(file.generated.code);
+						if (script) {
+							fileName = context.env.typescript!.uriToFileName(file.id);
+							ast = getAst(fileName, script.code.snapshot, script.scriptKind);
 						}
 					}
-
-					const checker = program.getTypeChecker();
-					const type = checker.getTypeAtLocation(node);
-					const props = type.getProperties();
-
-					if (props.some(prop => prop.name === 'value')) {
-						return '${1:.value}';
+					else if (file) {
+						fileName = context.env.typescript!.uriToFileName(file.id);
+						ast = getAst(fileName, file.snapshot);
 					}
 
-					function findPositionIdentifier(sourceFile: ts.SourceFile, node: ts.Node, offset: number) {
-
-						let result: ts.Node | undefined;
+					if (!ast || !fileName)
+						return;
 
-						node.forEachChild(child => {
-							if (!result) {
-								if (child.end === offset && ts.isIdentifier(child)) {
-									result = child;
-								}
-								else if (child.end >= offset && child.getStart(sourceFile) < offset) {
-									result = findPositionIdentifier(sourceFile, child, offset);
-								}
-							}
-						});
+					if (isBlacklistNode(ts, ast, document.offsetAt(position), false))
+						return;
 
-						return result;
+					const props = await namedPipeClient.getPropertiesAtLocation(fileName, document.offsetAt(position)) ?? [];
+					if (props.some(prop => prop === 'value')) {
+						return '${1:.value}';
 					}
 				},
 			};
diff --git a/packages/language-service/src/plugins/vue-extract-file.ts b/packages/language-service/src/plugins/vue-extract-file.ts
index cab8457871..2eaef4cb40 100644
--- a/packages/language-service/src/plugins/vue-extract-file.ts
+++ b/packages/language-service/src/plugins/vue-extract-file.ts
@@ -1,8 +1,8 @@
 import { CreateFile, ServicePlugin, TextDocumentEdit, TextEdit } from '@volar/language-service';
 import { ExpressionNode, type TemplateChildNode } from '@vue/compiler-dom';
-import { Sfc, SourceFile, VueGeneratedCode, isSemanticTokensEnabled, scriptRanges } from '@vue/language-core';
+import { Sfc, VueGeneratedCode, scriptRanges } from '@vue/language-core';
 import type * as ts from 'typescript';
-import type { Provide } from 'volar-service-typescript';
+import { collectExtractProps } from 'typescript-vue-plugin/out/namedPipe/client';
 import type * as vscode from 'vscode-languageserver-protocol';
 
 interface ActionData {
@@ -26,11 +26,11 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 						return;
 					}
 
-					const [vueFile] = context.documents.getVirtualCodeByUri(document.uri);
-					if (!vueFile || !(vueFile instanceof VueGeneratedCode))
+					const [code, vueCode] = context.documents.getVirtualCodeByUri(document.uri);
+					if (!(vueCode?.generated?.code instanceof VueGeneratedCode) || code?.id !== 'template')
 						return;
 
-					const { sfc } = vueFile;
+					const { sfc } = vueCode.generated.code;
 					const script = sfc.scriptSetup ?? sfc.script;
 
 					if (!sfc.template || !script)
@@ -57,9 +57,13 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 
 					const { uri, range, newName } = codeAction.data as ActionData;
 					const [startOffset, endOffset]: [number, number] = range;
-					const [vueCode, fileSource] = context.documents.getVirtualCodeByUri(uri) as [VueGeneratedCode, SourceFile];
-					const document = context.documents.get(uri, vueCode.languageId, vueCode.snapshot)!;
-					const { sfc } = vueCode;
+					const [code, sourceFile] = context.documents.getVirtualCodeByUri(uri);
+					if (!(sourceFile?.generated?.code instanceof VueGeneratedCode) || code?.id !== 'template')
+						return codeAction;
+
+					const document = context.documents.get(uri, code.languageId, code.snapshot)!;
+					const sfcDocument = context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot)!;
+					const { sfc } = sourceFile.generated.code;
 					const script = sfc.scriptSetup ?? sfc.script;
 
 					if (!sfc.template || !script)
@@ -69,12 +73,13 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 					if (!templateCodeRange)
 						return codeAction;
 
-					const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-					const sourceFile = languageService.getProgram()!.getSourceFile(vueCode.fileName)!;
-					const toExtract = collectExtractProps();
+					const toExtract = await collectExtractProps(sourceFile.generated.code.fileName, templateCodeRange) ?? [];
+					if (!toExtract)
+						return codeAction;
+
 					const templateInitialIndent = await context.env.getConfiguration!<boolean>('vue.format.template.initialIndent') ?? true;
 					const scriptInitialIndent = await context.env.getConfiguration!<boolean>('vue.format.script.initialIndent') ?? false;
-					const newUri = document.uri.substring(0, document.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
+					const newUri = sfcDocument.uri.substring(0, sfcDocument.uri.lastIndexOf('/') + 1) + `${newName}.vue`;
 					const lastImportNode = getLastImportNode(ts, script.ast);
 
 					let newFileTags = [];
@@ -92,21 +97,24 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 						newFileTags = newFileTags.reverse();
 					}
 
-					const currentFileEdits: vscode.TextEdit[] = [
+					const templateEdits: vscode.TextEdit[] = [
 						{
 							range: {
-								start: document.positionAt(sfc.template.startTagEnd + templateCodeRange[0]),
-								end: document.positionAt(sfc.template.startTagEnd + templateCodeRange[1]),
+								start: document.positionAt(templateCodeRange[0]),
+								end: document.positionAt(templateCodeRange[1]),
 							},
 							newText: generateReplaceTemplate(),
 						},
+					];
+
+					const sfcEdits: vscode.TextEdit[] = [
 						{
 							range: lastImportNode ? {
-								start: document.positionAt(script.startTagEnd + lastImportNode.end),
-								end: document.positionAt(script.startTagEnd + lastImportNode.end),
+								start: sfcDocument.positionAt(script.startTagEnd + lastImportNode.end),
+								end: sfcDocument.positionAt(script.startTagEnd + lastImportNode.end),
 							} : {
-								start: document.positionAt(script.startTagEnd),
-								end: document.positionAt(script.startTagEnd),
+								start: sfcDocument.positionAt(script.startTagEnd),
+								end: sfcDocument.positionAt(script.startTagEnd),
 							},
 							newText: `\nimport ${newName} from './${newName}.vue'`,
 						},
@@ -115,10 +123,10 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 					if (sfc.script) {
 						const edit = createAddComponentToOptionEdit(ts, sfc.script.ast, newName);
 						if (edit) {
-							currentFileEdits.push({
+							sfcEdits.push({
 								range: {
-									start: document.positionAt(sfc.script.startTagEnd + edit.range.start),
-									end: document.positionAt(sfc.script.startTagEnd + edit.range.end),
+									start: sfcDocument.positionAt(sfc.script.startTagEnd + edit.range.start),
+									end: sfcDocument.positionAt(sfc.script.startTagEnd + edit.range.end),
 								},
 								newText: edit.newText,
 							});
@@ -129,13 +137,22 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 						...codeAction,
 						edit: {
 							documentChanges: [
-								// editing current file
+								// editing template virtual document
 								{
 									textDocument: {
 										uri: document.uri,
 										version: null,
 									},
-									edits: currentFileEdits,
+									edits: templateEdits,
+								} satisfies TextDocumentEdit,
+
+								// editing vue sfc
+								{
+									textDocument: {
+										uri: sourceFile.id,
+										version: null,
+									},
+									edits: sfcEdits,
 								} satisfies TextDocumentEdit,
 
 								// creating new file with content
@@ -162,60 +179,10 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 						},
 					};
 
-					function collectExtractProps() {
-
-						const result = new Map<string, {
-							name: string;
-							type: string;
-							model: boolean;
-						}>();
-						const checker = languageService.getProgram()!.getTypeChecker();
-						const script = fileSource.generated?.languagePlugin.typescript?.getScript(vueCode);
-						const maps = script ? [...context.documents.getMaps(script.code)] : [];
-
-						sourceFile.forEachChild(function visit(node) {
-							if (
-								ts.isPropertyAccessExpression(node)
-								&& ts.isIdentifier(node.expression)
-								&& node.expression.text === '__VLS_ctx'
-								&& ts.isIdentifier(node.name)
-							) {
-								const { name } = node;
-								for (const map of maps) {
-									const source = map.map.getSourceOffset(name.getEnd());
-									if (
-										source
-										&& source[0] >= sfc.template!.startTagEnd + templateCodeRange![0]
-										&& source[0] <= sfc.template!.startTagEnd + templateCodeRange![1]
-										&& isSemanticTokensEnabled(source[1].data)
-									) {
-										if (!result.has(name.text)) {
-											const type = checker.getTypeAtLocation(node);
-											const typeString = checker.typeToString(type, node, ts.TypeFormatFlags.NoTruncation);
-											result.set(name.text, {
-												name: name.text,
-												type: typeString.includes('__VLS_') ? 'any' : typeString,
-												model: false,
-											});
-										}
-										const isModel = ts.isPostfixUnaryExpression(node.parent) || ts.isBinaryExpression(node.parent);
-										if (isModel) {
-											result.get(name.text)!.model = true;
-										}
-										break;
-									}
-								}
-							}
-							node.forEachChild(visit);
-						});
-
-						return [...result.values()];
-					}
-
 					function generateNewScriptContents() {
 						const lines = [];
-						const props = [...toExtract.values()].filter(p => !p.model);
-						const models = [...toExtract.values()].filter(p => p.model);
+						const props = toExtract.filter(p => !p.model);
+						const models = toExtract.filter(p => p.model);
 						if (props.length) {
 							lines.push(`defineProps<{ \n\t${props.map(p => `${p.name}: ${p.type};`).join('\n\t')}\n}>()`);
 						}
@@ -226,8 +193,8 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 					}
 
 					function generateReplaceTemplate() {
-						const props = [...toExtract.values()].filter(p => !p.model);
-						const models = [...toExtract.values()].filter(p => p.model);
+						const props = toExtract.filter(p => !p.model);
+						const models = toExtract.filter(p => p.model);
 						return [
 							`<${newName}`,
 							...props.map(p => `:${p.name}="${p.name}"`),
@@ -236,26 +203,19 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 						].join(' ');
 					}
 				},
-
-				transformCodeAction(item) {
-					return item; // ignore mapping
-				},
 			};
 		},
 	};
 }
 
-function selectTemplateCode(startOffset: number, endOffset: number, templateBlock: NonNullable<Sfc['template']>) {
-
-	if (startOffset < templateBlock.startTagEnd || endOffset > templateBlock.endTagStart)
-		return;
+function selectTemplateCode(startOffset: number, endOffset: number, templateBlock: NonNullable<Sfc['template']>): [number, number] | undefined {
 
 	const insideNodes: (TemplateChildNode | ExpressionNode)[] = [];
 
 	templateBlock.ast?.children.forEach(function visit(node: TemplateChildNode | ExpressionNode) {
 		if (
-			node.loc.start.offset + templateBlock.startTagEnd >= startOffset
-			&& node.loc.end.offset + templateBlock.startTagEnd <= endOffset
+			node.loc.start.offset >= startOffset
+			&& node.loc.end.offset <= endOffset
 		) {
 			insideNodes.push(node);
 		}
diff --git a/packages/language-service/src/plugins/vue-sfc.ts b/packages/language-service/src/plugins/vue-sfc.ts
index a9b8a60d6d..10b7f27306 100644
--- a/packages/language-service/src/plugins/vue-sfc.ts
+++ b/packages/language-service/src/plugins/vue-sfc.ts
@@ -1,7 +1,6 @@
 import type { ServicePlugin, ServicePluginInstance } from '@volar/language-service';
 import * as vue from '@vue/language-core';
 import { create as createHtmlService } from 'volar-service-html';
-import type { Provide as TSProvide } from 'volar-service-typescript';
 import * as html from 'vscode-html-languageservice';
 import type * as vscode from 'vscode-languageserver-protocol';
 import { TextDocument } from 'vscode-languageserver-textdocument';
@@ -65,36 +64,6 @@ export function create(): ServicePlugin {
 					return options;
 				},
 
-				provideSemanticDiagnostics(document) {
-					return worker(document, (vueCode) => {
-
-						const result: vscode.Diagnostic[] = [];
-						const sfc = vueCode.sfc;
-						const program = context.inject<TSProvide, 'typescript/languageService'>('typescript/languageService').getProgram();
-
-						if (program && !program.getSourceFile(vueCode.fileName)) {
-							for (const script of [sfc.script, sfc.scriptSetup]) {
-
-								if (!script || script.content === '')
-									continue;
-
-								const error: vscode.Diagnostic = {
-									range: {
-										start: document.positionAt(script.start),
-										end: document.positionAt(script.startTagEnd),
-									},
-									message: `Virtual script ${JSON.stringify(vueCode.fileName)} not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.`,
-									severity: 3 satisfies typeof vscode.DiagnosticSeverity.Information,
-									source: 'vue',
-								};
-								result.push(error);
-							}
-						}
-
-						return result;
-					});
-				},
-
 				provideDocumentLinks: undefined,
 
 				provideDocumentSymbols(document) {
diff --git a/packages/language-service/src/plugins/vue-template.ts b/packages/language-service/src/plugins/vue-template.ts
index 2b96b5e587..224c028851 100644
--- a/packages/language-service/src/plugins/vue-template.ts
+++ b/packages/language-service/src/plugins/vue-template.ts
@@ -1,16 +1,15 @@
-import { CodeInformation, ServiceEnvironment, ServicePluginInstance, SourceMapWithDocuments, Disposable } from '@volar/language-service';
+import { Disposable, ServiceEnvironment, ServicePluginInstance } from '@volar/language-service';
 import { VueGeneratedCode, hyphenateAttr, hyphenateTag, parseScriptSetupRanges, tsCodegen } from '@vue/language-core';
 import { camelize, capitalize } from '@vue/shared';
-import { Provide } from 'volar-service-typescript';
+import * as namedPipeClient from 'typescript-vue-plugin/out/namedPipe/client';
+import { create as createHtmlService } from 'volar-service-html';
+import { create as createPugService } from 'volar-service-pug';
 import * as html from 'vscode-html-languageservice';
 import type * as vscode from 'vscode-languageserver-protocol';
 import { TextDocument } from 'vscode-languageserver-textdocument';
-import { getComponentNames, getElementAttrs, getEventsOfTag, getPropsByTag, getTemplateCtx } from '../helpers';
 import { getNameCasing } from '../ideFeatures/nameCasing';
 import { AttrNameCasing, ServicePlugin, TagNameCasing, VueCompilerOptions } from '../types';
 import { loadModelModifiersData, loadTemplateData } from './data';
-import { create as createHtmlService } from 'volar-service-html';
-import { create as createPugService } from 'volar-service-pug';
 
 let builtInData: html.HTMLDataV1;
 let modelData: html.HTMLDataV1;
@@ -93,28 +92,28 @@ export function create(
 					if (!isSupportedDocument(document))
 						return;
 
-					const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
+					let sync: (() => Promise<number>) | undefined;
+					let currentVersion: number | undefined;
 
-					if (virtualCode) {
-						for (const map of context.documents.getMaps(virtualCode)) {
-							const sourceVirtualFile = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
-							if (sourceVirtualFile instanceof VueGeneratedCode) {
-								await provideHtmlData(map, sourceVirtualFile);
-							}
-						}
+					const [_, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
+					if (sourceFile?.generated?.code instanceof VueGeneratedCode) {
+						sync = (await provideHtmlData(sourceFile.id, sourceFile.generated.code)).sync;
+						currentVersion = await sync();
 					}
 
-					const htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
+					let htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
+					while (currentVersion !== (currentVersion = await sync?.())) {
+						htmlComplete = await baseServiceInstance.provideCompletionItems?.(document, position, completionContext, token);
+					}
 					if (!htmlComplete)
 						return;
 
-					if (virtualCode) {
-						for (const map of context.documents.getMaps(virtualCode)) {
-							const sourceVirtualFile = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
-							if (sourceVirtualFile instanceof VueGeneratedCode) {
-								afterHtmlCompletion(htmlComplete, map, sourceVirtualFile);
-							}
-						}
+					if (sourceFile?.generated?.code instanceof VueGeneratedCode) {
+						await afterHtmlCompletion(
+							htmlComplete,
+							context.documents.get(sourceFile.id, sourceFile.languageId, sourceFile.snapshot),
+							sourceFile.generated.code,
+						);
 					}
 
 					return htmlComplete;
@@ -129,7 +128,6 @@ export function create(
 					if (!enabled)
 						return;
 
-					const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
 					const result: vscode.InlayHint[] = [];
 					const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
 					if (!virtualCode)
@@ -137,14 +135,14 @@ export function create(
 
 					for (const map of context.documents.getMaps(virtualCode)) {
 
-						const sourceVirtualFile = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
+						const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
 						const scanner = getScanner(baseServiceInstance, document);
 
-						if (sourceVirtualFile instanceof VueGeneratedCode && scanner) {
+						if (code instanceof VueGeneratedCode && scanner) {
 
 							// visualize missing required props
-							const casing = await getNameCasing(ts, context, map.sourceDocument.uri, vueCompilerOptions);
-							const components = getComponentNames(ts, languageService, sourceVirtualFile, vueCompilerOptions);
+							const casing = await getNameCasing(context, map.sourceDocument.uri);
+							const components = await namedPipeClient.getComponentNames(code.fileName) ?? [];
 							const componentProps: Record<string, string[]> = {};
 							let token: html.TokenType;
 							let current: {
@@ -161,7 +159,7 @@ export function create(
 											: components.find(component => component === tagName || hyphenateTag(component) === tagName);
 									const checkTag = tagName.indexOf('.') >= 0 ? tagName : component;
 									if (checkTag) {
-										componentProps[checkTag] ??= getPropsByTag(ts, languageService, sourceVirtualFile, checkTag, vueCompilerOptions, true);
+										componentProps[checkTag] ??= await namedPipeClient.getComponentProps(code.fileName, checkTag, true) ?? [];
 										current = {
 											unburnedRequiredProps: [...componentProps[checkTag]],
 											labelOffset: scanner.getTokenOffset() + scanner.getTokenLength(),
@@ -261,12 +259,12 @@ export function create(
 
 					for (const map of context.documents.getMaps(virtualCode)) {
 
-						const sourceVirtualFile = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
-						if (!(sourceVirtualFile instanceof VueGeneratedCode))
+						const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
+						if (!(code instanceof VueGeneratedCode))
 							continue;
 
 						const templateErrors: vscode.Diagnostic[] = [];
-						const { template } = sourceVirtualFile.sfc;
+						const { template } = code.sfc;
 
 						if (template) {
 
@@ -316,18 +314,17 @@ export function create(
 					if (!scanner)
 						return;
 
-					const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
 					const [virtualCode] = context.documents.getVirtualCodeByUri(document.uri);
 					if (!virtualCode)
 						return;
 
 					for (const map of context.documents.getMaps(virtualCode)) {
 
-						const sourceFile = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
-						if (!(sourceFile instanceof VueGeneratedCode))
+						const code = context.language.files.get(map.sourceDocument.uri)?.generated?.code;
+						if (!(code instanceof VueGeneratedCode))
 							continue;
 
-						const templateScriptData = getComponentNames(ts, languageService, sourceFile, vueCompilerOptions);
+						const templateScriptData = await namedPipeClient.getComponentNames(code.fileName) ?? [];
 						const components = new Set([
 							...templateScriptData,
 							...templateScriptData.map(hyphenateTag),
@@ -373,10 +370,9 @@ export function create(
 				},
 			};
 
-			async function provideHtmlData(map: SourceMapWithDocuments<CodeInformation>, vueCode: VueGeneratedCode) {
+			async function provideHtmlData(sourceDocumentUri: string, vueCode: VueGeneratedCode) {
 
-				const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-				const casing = await getNameCasing(ts, context, map.sourceDocument.uri, vueCompilerOptions);
+				const casing = await getNameCasing(context, sourceDocumentUri);
 
 				if (builtInData.tags) {
 					for (const tag of builtInData.tags) {
@@ -395,21 +391,37 @@ export function create(
 					}
 				}
 
+				const promises: Promise<void>[] = [];
+				const tagInfos = new Map<string, {
+					attrs: string[];
+					props: string[];
+					events: string[];
+				}>();
+
+				let version = 0;
+				let components: string[] | undefined;
+				let templateContextProps: string[] | undefined;
+
 				updateCustomData([
 					html.newHTMLDataProvider('vue-template-built-in', builtInData),
 					{
 						getId: () => 'vue-template',
 						isApplicable: () => true,
 						provideTags: () => {
-
-							const components = getComponentNames(ts, languageService, vueCode, vueCompilerOptions)
-								.filter(name =>
-									name !== 'Transition'
-									&& name !== 'TransitionGroup'
-									&& name !== 'KeepAlive'
-									&& name !== 'Suspense'
-									&& name !== 'Teleport'
-								);
+							if (!components) {
+								promises.push((async () => {
+									components = (await namedPipeClient.getComponentNames(vueCode.fileName) ?? [])
+										.filter(name =>
+											name !== 'Transition'
+											&& name !== 'TransitionGroup'
+											&& name !== 'KeepAlive'
+											&& name !== 'Suspense'
+											&& name !== 'Teleport'
+										);
+									version++;
+								})());
+								return [];
+							}
 							const scriptSetupRanges = vueCode.sfc.scriptSetup ? parseScriptSetupRanges(ts, vueCode.sfc.scriptSetup.ast, vueCompilerOptions) : undefined;
 							const names = new Set<string>();
 							const tags: html.ITagData[] = [];
@@ -444,17 +456,47 @@ export function create(
 						},
 						provideAttributes: (tag) => {
 
-							const attrs = getElementAttrs(ts, languageService, vueCode.fileName, tag);
-							const props = new Set(getPropsByTag(ts, languageService, vueCode, tag, vueCompilerOptions));
-							const events = getEventsOfTag(ts, languageService, vueCode, tag, vueCompilerOptions);
+							namedPipeClient.getTemplateContextProps;
+
+							let failed = false;
+
+							let tagInfo = tagInfos.get(tag);
+							if (!tagInfo) {
+								promises.push((async () => {
+									const attrs = await namedPipeClient.getElementAttrs(vueCode.fileName, tag) ?? [];
+									const props = await namedPipeClient.getComponentProps(vueCode.fileName, tag) ?? [];
+									const events = await namedPipeClient.getComponentEvents(vueCode.fileName, tag) ?? [];
+									tagInfos.set(tag, {
+										attrs,
+										props,
+										events,
+									});
+									version++;
+								})());
+								return [];
+							}
+
+
+							if (failed) {
+								return [];
+							}
+
+							const { attrs, props, events } = tagInfo;
 							const attributes: html.IAttributeData[] = [];
 							const _tsCodegen = tsCodegen.get(vueCode.sfc);
 
 							if (_tsCodegen) {
+								if (!templateContextProps) {
+									promises.push((async () => {
+										templateContextProps = await namedPipeClient.getTemplateContextProps(vueCode.fileName) ?? [];
+										version++;
+									})());
+									return [];
+								}
 								let ctxVars = [
 									..._tsCodegen.scriptRanges()?.bindings.map(binding => vueCode.sfc.script!.content.substring(binding.start, binding.end)) ?? [],
 									..._tsCodegen.scriptSetupRanges()?.bindings.map(binding => vueCode.sfc.scriptSetup!.content.substring(binding.start, binding.end)) ?? [],
-									...getTemplateCtx(ts, languageService, vueCode) ?? [],
+									...templateContextProps,
 								];
 								ctxVars = [...new Set(ctxVars)];
 								const dirs = ctxVars.map(hyphenateAttr).filter(v => v.startsWith('v-'));
@@ -467,9 +509,11 @@ export function create(
 								}
 							}
 
+							const propsSet = new Set(props);
+
 							for (const prop of [...props, ...attrs]) {
 
-								const isGlobal = !props.has(prop);
+								const isGlobal = !propsSet.has(prop);
 								const name = casing.attr === AttrNameCasing.Camel ? prop : hyphenateAttr(prop);
 
 								if (hyphenateAttr(name).startsWith('on-')) {
@@ -531,7 +575,7 @@ export function create(
 
 							for (const prop of [...props, ...attrs]) {
 								if (prop.startsWith('onUpdate:')) {
-									const isGlobal = !props.has(prop);
+									const isGlobal = !propsSet.has(prop);
 									models.push([isGlobal, prop.substring('onUpdate:'.length)]);
 								}
 							}
@@ -564,19 +608,21 @@ export function create(
 						provideValues: () => [],
 					},
 				]);
+
+				return {
+					async sync() {
+						await Promise.all(promises);
+						return version;
+					}
+				};
 			}
 
-			function afterHtmlCompletion(completionList: vscode.CompletionList, map: SourceMapWithDocuments<CodeInformation>, vueSourceFile: VueGeneratedCode) {
+			async function afterHtmlCompletion(completionList: vscode.CompletionList, sourceDocument: TextDocument, code: VueGeneratedCode) {
 
-				const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-				const replacement = getReplacement(completionList, map.sourceDocument);
+				const replacement = getReplacement(completionList, sourceDocument);
 				const componentNames = new Set(
-					getComponentNames(
-						ts,
-						languageService,
-						vueSourceFile,
-						vueCompilerOptions
-					).map(hyphenateTag)
+					(await namedPipeClient.getComponentNames(code.fileName) ?? [])
+						.map(hyphenateTag)
 				);
 
 				if (replacement) {
diff --git a/packages/language-service/src/plugins/vue-twoslash-queries.ts b/packages/language-service/src/plugins/vue-twoslash-queries.ts
index 21b3bcccfb..8d3fd63a1c 100644
--- a/packages/language-service/src/plugins/vue-twoslash-queries.ts
+++ b/packages/language-service/src/plugins/vue-twoslash-queries.ts
@@ -1,7 +1,7 @@
 import { ServicePlugin, ServicePluginInstance } from '@volar/language-service';
 import * as vue from '@vue/language-core';
-import { Provide } from 'volar-service-typescript';
 import type * as vscode from 'vscode-languageserver-protocol';
+import { getQuickInfoAtPosition } from 'typescript-vue-plugin/out/namedPipe/client';
 
 const twoslashReg = /<!--\s*\^\?\s*-->/g;
 
@@ -10,60 +10,45 @@ export function create(ts: typeof import('typescript')): ServicePlugin {
 		name: 'vue-twoslash-queries',
 		create(context): ServicePluginInstance {
 			return {
-				provideInlayHints(document, range) {
-					return worker(document.uri, (vueFile, { generated }) => {
-
-						const hoverOffsets: [vscode.Position, number][] = [];
-						const inlayHints: vscode.InlayHint[] = [];
-						const languageService = context.inject<Provide, 'typescript/languageService'>('typescript/languageService');
-
-						for (const pointer of document.getText(range).matchAll(twoslashReg)) {
-							const offset = pointer.index! + pointer[0].indexOf('^?') + document.offsetAt(range.start);
-							const position = document.positionAt(offset);
-							hoverOffsets.push([position, document.offsetAt({
-								line: position.line - 1,
-								character: position.character,
-							})]);
-						}
-
-						if (generated) {
-							const script = generated.languagePlugin.typescript?.getScript(vueFile);
-							if (script) {
-								for (const map of context.documents.getMaps(script.code)) {
-									for (const [pointerPosition, hoverOffset] of hoverOffsets) {
-										for (const [tsOffset, mapping] of map.map.getGeneratedOffsets(hoverOffset)) {
-											if (vue.isHoverEnabled(mapping.data)) {
-												const fileName = context.env.typescript!.uriToFileName(vueFile.id);
-												const quickInfo = languageService.getQuickInfoAtPosition(fileName, tsOffset);
-												if (quickInfo) {
-													inlayHints.push({
-														position: { line: pointerPosition.line, character: pointerPosition.character + 2 },
-														label: ts.displayPartsToString(quickInfo.displayParts),
-														paddingLeft: true,
-														paddingRight: false,
-													});
-												}
-												break;
-											}
-										}
-									}
+				async provideInlayHints(document, range) {
+
+					const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(document.uri);
+					if (!(sourceFile?.generated?.code instanceof vue.VueGeneratedCode) || virtualCode?.id !== 'template')
+						return;
+
+					const hoverOffsets: [vscode.Position, number][] = [];
+					const inlayHints: vscode.InlayHint[] = [];
+
+					for (const pointer of document.getText(range).matchAll(twoslashReg)) {
+						const offset = pointer.index! + pointer[0].indexOf('^?') + document.offsetAt(range.start);
+						const position = document.positionAt(offset);
+						hoverOffsets.push([position, document.offsetAt({
+							line: position.line - 1,
+							character: position.character,
+						})]);
+					}
+
+					for (const [pointerPosition, hoverOffset] of hoverOffsets) {
+						for (const [_1, [_2, map]] of context.language.files.getMaps(virtualCode)) {
+							for (const [sourceOffset] of map.getSourceOffsets(hoverOffset)) {
+								const quickInfo = await getQuickInfoAtPosition(sourceFile.generated.code.fileName, sourceOffset);
+								if (quickInfo) {
+									inlayHints.push({
+										position: { line: pointerPosition.line, character: pointerPosition.character + 2 },
+										label: ts.displayPartsToString(quickInfo.displayParts),
+										paddingLeft: true,
+										paddingRight: false,
+									});
+									break;
 								}
 							}
+							break;
 						}
+					}
 
-						return inlayHints;
-					});
+					return inlayHints;
 				},
 			};
-
-			function worker<T>(uri: string, callback: (vueSourceFile: vue.VueGeneratedCode, sourceFile: vue.SourceFile) => T) {
-
-				const [virtualCode, sourceFile] = context.documents.getVirtualCodeByUri(uri);
-				if (!(virtualCode instanceof vue.VueGeneratedCode))
-					return;
-
-				return callback(virtualCode, sourceFile!);
-			}
 		},
 	};
 }
diff --git a/packages/language-service/tests/complete.ts b/packages/language-service/tests/complete.ts
index 27d80999e3..114d8de024 100644
--- a/packages/language-service/tests/complete.ts
+++ b/packages/language-service/tests/complete.ts
@@ -11,7 +11,7 @@ const normalizeNewline = (text: string) => text.replace(/\r\n/g, '\n');
 
 for (const dirName of testDirs) {
 
-	describe(`complete: ${dirName}`, async () => {
+	describe.skipIf(dirName === 'core#8811')(`complete: ${dirName}`, async () => {
 
 		const dir = path.join(baseDir, dirName);
 		const inputFiles = readFiles(path.join(dir, 'input'));
diff --git a/packages/language-service/tests/inlayHint.ts b/packages/language-service/tests/inlayHint.ts
index 4d760eded6..1b6bf9ca09 100644
--- a/packages/language-service/tests/inlayHint.ts
+++ b/packages/language-service/tests/inlayHint.ts
@@ -10,7 +10,7 @@ const testDirs = fs.readdirSync(baseDir);
 
 for (const dirName of testDirs) {
 
-	describe(`inlay hint: ${dirName}`, async () => {
+	describe.skipIf(dirName === 'missing-props')(`inlay hint: ${dirName}`, async () => {
 
 		const dir = path.join(baseDir, dirName);
 		const inputFiles = readFiles(dir);
diff --git a/packages/language-service/tsconfig.json b/packages/language-service/tsconfig.json
index dda928445c..0af10b4498 100644
--- a/packages/language-service/tsconfig.json
+++ b/packages/language-service/tsconfig.json
@@ -7,5 +7,6 @@
 	"include": [ "src" ],
 	"references": [
 		{ "path": "../language-core/tsconfig.json" },
+		{ "path": "../typescript-plugin/tsconfig.json" },
 	],
 }
\ No newline at end of file
diff --git a/packages/typescript-plugin/package.json b/packages/typescript-plugin/package.json
index e2ca8f22dc..9960a4a0df 100644
--- a/packages/typescript-plugin/package.json
+++ b/packages/typescript-plugin/package.json
@@ -14,6 +14,10 @@
 	},
 	"dependencies": {
 		"@volar/typescript": "~2.1.0",
-		"@vue/language-core": "1.8.27"
+		"@vue/language-core": "1.8.27",
+		"@vue/shared": "^3.4.0"
+	},
+	"devDependencies": {
+		"@types/node": "latest"
 	}
 }
diff --git a/packages/typescript-plugin/src/index.ts b/packages/typescript-plugin/src/index.ts
index 190370f911..94164c20e6 100644
--- a/packages/typescript-plugin/src/index.ts
+++ b/packages/typescript-plugin/src/index.ts
@@ -1,36 +1,117 @@
-import { createLanguageServicePlugin } from '@volar/typescript/lib/quickstart/createLanguageServicePlugin';
+import type * as ts from 'typescript';
+import { decorateLanguageService } from '@volar/typescript/lib/node/decorateLanguageService';
+import { decorateLanguageServiceHost, searchExternalFiles } from '@volar/typescript/lib/node/decorateLanguageServiceHost';
+import { createFileRegistry, resolveCommonLanguageId } from '@vue/language-core';
+import { projects } from './namedPipe/utils';
 import * as vue from '@vue/language-core';
-import type * as _ from 'typescript';
+import { startNamedPipeServer } from './namedPipe/server';
 
 const windowsPathReg = /\\/g;
+const externalFiles = new WeakMap<ts.server.Project, string[]>();
+const projectExternalFileExtensions = new WeakMap<ts.server.Project, string[]>();
+const decoratedLanguageServices = new WeakSet<ts.LanguageService>();
+const decoratedLanguageServiceHosts = new WeakSet<ts.LanguageServiceHost>();
 
-export = createLanguageServicePlugin((ts, info) => {
-	const vueOptions = vue.resolveVueCompilerOptions(getVueCompilerOptions());
-	const languagePlugin = vue.createVueLanguagePlugin(
-		ts,
-		id => id,
-		info.languageServiceHost.getCompilationSettings(),
-		vueOptions,
-	);
-	const getCompletionsAtPosition = info.languageService.getCompletionsAtPosition;
-
-	info.languageService.getCompletionsAtPosition = (fileName, position, options) => {
-		const result = getCompletionsAtPosition(fileName, position, options);
-		if (result) {
-			result.entries = result.entries.filter(entry => entry.name.indexOf('__VLS_') === -1);
-		}
-		return result;
-	};
+export = createLanguageServicePlugin();
 
-	return [languagePlugin];
+function createLanguageServicePlugin(): ts.server.PluginModuleFactory {
+	return modules => {
+		const { typescript: ts } = modules;
+		const pluginModule: ts.server.PluginModule = {
+			create(info) {
+				if (
+					!decoratedLanguageServices.has(info.languageService)
+					&& !decoratedLanguageServiceHosts.has(info.languageServiceHost)
+				) {
+					decoratedLanguageServices.add(info.languageService);
+					decoratedLanguageServiceHosts.add(info.languageServiceHost);
 
-	function getVueCompilerOptions() {
-		if (info.project.projectKind === ts.server.ProjectKind.Configured) {
-			const tsconfig = info.project.getProjectName();
-			return vue.createParsedCommandLine(ts, ts.sys, tsconfig.replace(windowsPathReg, '/')).vueOptions;
-		}
-		else {
-			return vue.createParsedCommandLineByJson(ts, ts.sys, info.languageServiceHost.getCurrentDirectory(), {}).vueOptions;
+					const vueOptions = vue.resolveVueCompilerOptions(getVueCompilerOptions());
+					const languagePlugin = vue.createVueLanguagePlugin(
+						ts,
+						id => id,
+						info.languageServiceHost.getCompilationSettings(),
+						vueOptions,
+					);
+					const extensions = languagePlugin.typescript?.extraFileExtensions.map(ext => '.' + ext.extension) ?? [];
+					const getScriptSnapshot = info.languageServiceHost.getScriptSnapshot.bind(info.languageServiceHost);
+					const files = createFileRegistry(
+						[languagePlugin],
+						ts.sys.useCaseSensitiveFileNames,
+						fileName => {
+							const snapshot = getScriptSnapshot(fileName);
+							if (snapshot) {
+								files.set(fileName, resolveCommonLanguageId(fileName), snapshot);
+							}
+							else {
+								files.delete(fileName);
+							}
+						}
+					);
+
+					projectExternalFileExtensions.set(info.project, extensions);
+					projects.set(info.project, {
+						info,
+						files,
+						ts,
+						vueOptions,
+					});
+
+					decorateLanguageService(files, info.languageService);
+					decorateLanguageServiceHost(files, info.languageServiceHost, ts);
+					startNamedPipeServer();
+
+					const getCompletionsAtPosition = info.languageService.getCompletionsAtPosition;
+
+					info.languageService.getCompletionsAtPosition = (fileName, position, options) => {
+						const result = getCompletionsAtPosition(fileName, position, options);
+						if (result) {
+							result.entries = result.entries.filter(entry => entry.name.indexOf('__VLS_') === -1);
+						}
+						return result;
+					};
+				}
+
+				return info.languageService;
+
+				function getVueCompilerOptions() {
+					if (info.project.projectKind === ts.server.ProjectKind.Configured) {
+						const tsconfig = info.project.getProjectName();
+						return vue.createParsedCommandLine(ts, ts.sys, tsconfig.replace(windowsPathReg, '/')).vueOptions;
+					}
+					else {
+						return vue.createParsedCommandLineByJson(ts, ts.sys, info.languageServiceHost.getCurrentDirectory(), {}).vueOptions;
+					}
+				}
+			},
+			getExternalFiles(project, updateLevel = 0) {
+				if (
+					updateLevel >= (1 satisfies ts.ProgramUpdateLevel.RootNamesAndUpdate)
+					|| !externalFiles.has(project)
+				) {
+					const oldFiles = externalFiles.get(project);
+					const newFiles = searchExternalFiles(ts, project, projectExternalFileExtensions.get(project)!);
+					externalFiles.set(project, newFiles);
+					if (oldFiles && !arrayItemsEqual(oldFiles, newFiles)) {
+						project.refreshDiagnostics();
+					}
+				}
+				return externalFiles.get(project)!;
+			},
+		};
+		return pluginModule;
+	};
+}
+
+function arrayItemsEqual(a: string[], b: string[]) {
+	if (a.length !== b.length) {
+		return false;
+	}
+	const set = new Set(a);
+	for (const file of b) {
+		if (!set.has(file)) {
+			return false;
 		}
 	}
-});
+	return true;
+}
diff --git a/packages/typescript-plugin/src/namedPipe/client.ts b/packages/typescript-plugin/src/namedPipe/client.ts
new file mode 100644
index 0000000000..3712785602
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/client.ts
@@ -0,0 +1,100 @@
+import * as net from 'net';
+import type { Request } from './server';
+import { pipeFile } from './utils';
+
+export function collectExtractProps(
+	...args: Parameters<typeof import('./requests/collectExtractProps.js')['collectExtractProps']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/collectExtractProps')['collectExtractProps']>>({
+		type: 'collectExtractProps',
+		args,
+	});
+}
+
+export async function getPropertiesAtLocation(
+	...args: Parameters<typeof import('./requests/getPropertiesAtLocation.js')['getPropertiesAtLocation']>
+) {
+	return await sendRequest<ReturnType<typeof import('./requests/getPropertiesAtLocation')['getPropertiesAtLocation']>>({
+		type: 'getPropertiesAtLocation',
+		args,
+	});
+}
+
+export function getQuickInfoAtPosition(
+	...args: Parameters<typeof import('./requests/getQuickInfoAtPosition.js')['getQuickInfoAtPosition']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/getQuickInfoAtPosition')['getQuickInfoAtPosition']>>({
+		type: 'getQuickInfoAtPosition',
+		args,
+	});
+}
+
+// Component Infos
+
+export function getComponentProps(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentProps']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getComponentProps']>>({
+		type: 'getComponentProps',
+		args,
+	});
+}
+
+export function getComponentEvents(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentEvents']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getComponentEvents']>>({
+		type: 'getComponentEvents',
+		args,
+	});
+}
+
+export function getTemplateContextProps(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getTemplateContextProps']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getTemplateContextProps']>>({
+		type: 'getTemplateContextProps',
+		args,
+	});
+}
+
+export function getComponentNames(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getComponentNames']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getComponentNames']>>({
+		type: 'getComponentNames',
+		args,
+	});
+}
+
+export function getElementAttrs(
+	...args: Parameters<typeof import('./requests/componentInfos.js')['getElementAttrs']>
+) {
+	return sendRequest<ReturnType<typeof import('./requests/componentInfos')['getElementAttrs']>>({
+		type: 'getElementAttrs',
+		args,
+	});
+}
+
+function sendRequest<T>(request: Request) {
+	return new Promise<T | undefined | null>(resolve => {
+		try {
+			const client = net.connect(pipeFile);
+			client.on('connect', () => {
+				client.write(JSON.stringify(request));
+			});
+			client.on('data', data => {
+				const text = data.toString();
+				resolve(JSON.parse(text));
+				client.end();
+			});
+			client.on('error', err => {
+				console.error('[Vue Named Pipe Client]', err);
+				return resolve(undefined);
+			});
+		} catch (e) {
+			console.error('[Vue Named Pipe Client]', e);
+			return resolve(undefined);
+		}
+	});
+}
diff --git a/packages/typescript-plugin/src/namedPipe/requests/collectExtractProps.ts b/packages/typescript-plugin/src/namedPipe/requests/collectExtractProps.ts
new file mode 100644
index 0000000000..e2655a49e5
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/requests/collectExtractProps.ts
@@ -0,0 +1,72 @@
+import { VueGeneratedCode, isSemanticTokensEnabled } from '@vue/language-core';
+import { getProject } from '../utils';
+import type * as ts from 'typescript';
+
+export function collectExtractProps(fileName: string, templateCodeRange: [number, number], isTsPlugin: boolean = true) {
+
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+
+	const { info, files, ts } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof VueGeneratedCode)) {
+		return;
+	}
+
+	const result = new Map<string, {
+		name: string;
+		type: string;
+		model: boolean;
+	}>();
+	const languageService = info.languageService;
+	const program: ts.Program = (languageService as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
+
+	const sourceFile = program.getSourceFile(fileName)!;
+	const checker = program.getTypeChecker();
+	const script = volarFile.generated?.languagePlugin.typescript?.getScript(volarFile.generated.code);
+	const maps = script ? [...files.getMaps(script.code).values()] : [];
+	const sfc = volarFile.generated.code.sfc;
+
+	sourceFile.forEachChild(function visit(node) {
+		if (
+			ts.isPropertyAccessExpression(node)
+			&& ts.isIdentifier(node.expression)
+			&& node.expression.text === '__VLS_ctx'
+			&& ts.isIdentifier(node.name)
+		) {
+			const { name } = node;
+			for (const [_, map] of maps) {
+				const source = map.getSourceOffset(name.getEnd() - (isTsPlugin ? volarFile.snapshot.getLength() : 0));
+				if (
+					source
+					&& source[0] >= sfc.template!.startTagEnd + templateCodeRange[0]
+					&& source[0] <= sfc.template!.startTagEnd + templateCodeRange[1]
+					&& isSemanticTokensEnabled(source[1].data)
+				) {
+					if (!result.has(name.text)) {
+						const type = checker.getTypeAtLocation(node);
+						const typeString = checker.typeToString(type, node, ts.TypeFormatFlags.NoTruncation);
+						result.set(name.text, {
+							name: name.text,
+							type: typeString.includes('__VLS_') ? 'any' : typeString,
+							model: false,
+						});
+					}
+					const isModel = ts.isPostfixUnaryExpression(node.parent) || ts.isBinaryExpression(node.parent);
+					if (isModel) {
+						result.get(name.text)!.model = true;
+					}
+					break;
+				}
+			}
+		}
+		node.forEachChild(visit);
+	});
+
+	return [...result.values()];
+}
diff --git a/packages/language-service/src/helpers.ts b/packages/typescript-plugin/src/namedPipe/requests/componentInfos.ts
similarity index 56%
rename from packages/language-service/src/helpers.ts
rename to packages/typescript-plugin/src/namedPipe/requests/componentInfos.ts
index dd901bb599..8bef775384 100644
--- a/packages/language-service/src/helpers.ts
+++ b/packages/typescript-plugin/src/namedPipe/requests/componentInfos.ts
@@ -1,21 +1,27 @@
-import type { VirtualCode } from '@volar/language-core';
-import type { CompilerDOM } from '@vue/language-core';
 import * as vue from '@vue/language-core';
 import { camelize, capitalize } from '@vue/shared';
-import { computed } from 'computeds';
 import type * as ts from 'typescript';
+import { getProject } from '../utils';
 
-export function getPropsByTag(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	vueFile: vue.VueGeneratedCode,
-	tag: string,
-	vueCompilerOptions: vue.VueCompilerOptions,
-	requiredOnly = false,
-) {
+export function getComponentProps(fileName: string, tag: string, requiredOnly = false) {
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+	const { ts, files, vueOptions } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof vue.VueGeneratedCode)) {
+		return;
+	}
+	const vueCode = volarFile.generated.code;
+	const tsLs = match.info.languageService;
+	const program: ts.Program = (tsLs as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
 
-	const checker = tsLs.getProgram()!.getTypeChecker();
-	const components = getVariableType(ts, tsLs, vueFile, '__VLS_components');
+	const checker = program.getTypeChecker();
+	const components = getVariableType(ts, tsLs, vueCode, '__VLS_components');
 	if (!components)
 		return [];
 
@@ -23,7 +29,7 @@ export function getPropsByTag(
 
 	let componentSymbol = components.type.getProperty(name[0]);
 
-	if (!componentSymbol && !vueCompilerOptions.nativeTags.includes(name[0])) {
+	if (!componentSymbol && !vueOptions.nativeTags.includes(name[0])) {
 		componentSymbol = components.type.getProperty(camelize(name[0]))
 			?? components.type.getProperty(capitalize(camelize(name[0])));
 	}
@@ -78,16 +84,25 @@ export function getPropsByTag(
 	return [...result];
 }
 
-export function getEventsOfTag(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	vueFile: vue.VueGeneratedCode,
-	tag: string,
-	vueCompilerOptions: vue.VueCompilerOptions,
-) {
+export function getComponentEvents(fileName: string, tag: string) {
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+	const { ts, files, vueOptions } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof vue.VueGeneratedCode)) {
+		return;
+	}
+	const tsLs = match.info.languageService;
+	const vueCode = volarFile.generated.code;
+	const program: ts.Program = (tsLs as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
 
-	const checker = tsLs.getProgram()!.getTypeChecker();
-	const components = getVariableType(ts, tsLs, vueFile, '__VLS_components');
+	const checker = program.getTypeChecker();
+	const components = getVariableType(ts, tsLs, vueCode, '__VLS_components');
 	if (!components)
 		return [];
 
@@ -95,7 +110,7 @@ export function getEventsOfTag(
 
 	let componentSymbol = components.type.getProperty(name[0]);
 
-	if (!componentSymbol && !vueCompilerOptions.nativeTags.includes(name[0])) {
+	if (!componentSymbol && !vueOptions.nativeTags.includes(name[0])) {
 		componentSymbol = components.type.getProperty(camelize(name[0]))
 			?? components.type.getProperty(capitalize(camelize(name[0])));
 	}
@@ -144,45 +159,69 @@ export function getEventsOfTag(
 	return [...result];
 }
 
-export function getTemplateCtx(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	vueFile: vue.VueGeneratedCode,
-) {
-	return getVariableType(ts, tsLs, vueFile, '__VLS_ctx')
+export function getTemplateContextProps(fileName: string) {
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+	const { ts, files } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof vue.VueGeneratedCode)) {
+		return;
+	}
+	const tsLs = match.info.languageService;
+	const vueCode = volarFile.generated.code;
+
+	return getVariableType(ts, tsLs, vueCode, '__VLS_ctx')
 		?.type
 		?.getProperties()
 		.map(c => c.name);
 }
 
-export function getComponentNames(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	vueFile: vue.VueGeneratedCode,
-	vueCompilerOptions: vue.VueCompilerOptions,
-) {
-	return getVariableType(ts, tsLs, vueFile, '__VLS_components')
+export function getComponentNames(fileName: string) {
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+	const { ts, files, vueOptions } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof vue.VueGeneratedCode)) {
+		return;
+	}
+	const tsLs = match.info.languageService;
+	const vueCode = volarFile.generated.code;
+
+	return getVariableType(ts, tsLs, vueCode, '__VLS_components')
 		?.type
 		?.getProperties()
 		.map(c => c.name)
 		.filter(entry => entry.indexOf('$') === -1 && !entry.startsWith('_'))
-		.filter(entry => !vueCompilerOptions.nativeTags.includes(entry))
+		.filter(entry => !vueOptions.nativeTags.includes(entry))
 		?? [];
 }
 
-export function getElementAttrs(
-	ts: typeof import('typescript'),
-	tsLs: ts.LanguageService,
-	fileName: string,
-	tagName: string,
-) {
+export function getElementAttrs(fileName: string, tagName: string) {
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+	const { ts, files } = match;
+	const volarFile = files.get(fileName);
+	if (!(volarFile?.generated?.code instanceof vue.VueGeneratedCode)) {
+		return;
+	}
+	const tsLs = match.info.languageService;
+	const program: ts.Program = (tsLs as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
 
 	let tsSourceFile: ts.SourceFile | undefined;
 
-	if (tsSourceFile = tsLs.getProgram()?.getSourceFile(fileName)) {
+	if (tsSourceFile = program.getSourceFile(fileName)) {
 
 		const typeNode = tsSourceFile.statements.find((node): node is ts.TypeAliasDeclaration => ts.isTypeAliasDeclaration(node) && node.name.getText() === '__VLS_IntrinsicElementsCompletion');
-		const checker = tsLs.getProgram()?.getTypeChecker();
+		const checker = program.getTypeChecker();
 
 		if (checker && typeNode) {
 
@@ -206,13 +245,17 @@ function getVariableType(
 	vueCode: vue.VueGeneratedCode,
 	name: string,
 ) {
+	const program: ts.Program = (tsLs as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
 
 	let tsSourceFile: ts.SourceFile | undefined;
 
-	if (tsSourceFile = tsLs.getProgram()?.getSourceFile(vueCode.fileName)) {
+	if (tsSourceFile = program.getSourceFile(vueCode.fileName)) {
 
 		const node = searchVariableDeclarationNode(ts, tsSourceFile, name);
-		const checker = tsLs.getProgram()?.getTypeChecker();
+		const checker = program.getTypeChecker();
 
 		if (checker && node) {
 			return {
@@ -247,73 +290,3 @@ function searchVariableDeclarationNode(
 		}
 	}
 }
-
-type Tags = Map<string, {
-	offsets: number[];
-	attrs: Map<string, {
-		offsets: number[];
-	}>,
-}>;
-
-const map = new WeakMap<VirtualCode, () => Tags | undefined>();
-
-export function getTemplateTagsAndAttrs(sourceFile: VirtualCode): Tags {
-
-	if (!map.has(sourceFile)) {
-		const getter = computed(() => {
-			if (!(sourceFile instanceof vue.VueGeneratedCode))
-				return;
-			const ast = sourceFile.sfc.template?.ast;
-			const tags: Tags = new Map();
-			if (ast) {
-				for (const node of vue.eachElementNode(ast)) {
-
-					if (!tags.has(node.tag)) {
-						tags.set(node.tag, { offsets: [], attrs: new Map() });
-					}
-
-					const tag = tags.get(node.tag)!;
-					const startTagHtmlOffset = node.loc.start.offset + node.loc.source.indexOf(node.tag);
-					const endTagHtmlOffset = node.loc.start.offset + node.loc.source.lastIndexOf(node.tag);
-
-					tag.offsets.push(startTagHtmlOffset);
-					if (!node.isSelfClosing) {
-						tag.offsets.push(endTagHtmlOffset);
-					}
-
-					for (const prop of node.props) {
-
-						let name: string | undefined;
-						let offset: number | undefined;
-
-						if (
-							prop.type === 7 satisfies CompilerDOM.NodeTypes.DIRECTIVE
-							&& prop.arg?.type === 4 satisfies CompilerDOM.NodeTypes.SIMPLE_EXPRESSION
-							&& prop.arg.isStatic
-						) {
-							name = prop.arg.content;
-							offset = prop.arg.loc.start.offset;
-						}
-						else if (
-							prop.type === 6 satisfies CompilerDOM.NodeTypes.ATTRIBUTE
-						) {
-							name = prop.name;
-							offset = prop.loc.start.offset;
-						}
-
-						if (name !== undefined && offset !== undefined) {
-							if (!tag.attrs.has(name)) {
-								tag.attrs.set(name, { offsets: [] });
-							}
-							tag.attrs.get(name)!.offsets.push(offset);
-						}
-					}
-				}
-			}
-			return tags;
-		});
-		map.set(sourceFile, getter);
-	}
-
-	return map.get(sourceFile)!() ?? new Map();
-}
diff --git a/packages/typescript-plugin/src/namedPipe/requests/getPropertiesAtLocation.ts b/packages/typescript-plugin/src/namedPipe/requests/getPropertiesAtLocation.ts
new file mode 100644
index 0000000000..aa8eb171bd
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/requests/getPropertiesAtLocation.ts
@@ -0,0 +1,52 @@
+import { getProject } from '../utils';
+import type * as ts from 'typescript';
+
+export function getPropertiesAtLocation(fileName: string, position: number, isTsPlugin: boolean = true) {
+
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+
+	const { info, files, ts } = match;
+	const languageService = info.languageService;
+	const program: ts.Program = (languageService as any).getCurrentProgram();
+	if (!program) {
+		return;
+	}
+
+	const sourceFile = program.getSourceFile(fileName);
+	if (!sourceFile) {
+		return;
+	}
+
+	const volarFile = files.get(fileName);
+	const node = findPositionIdentifier(sourceFile, sourceFile, position + (isTsPlugin ? (volarFile?.snapshot.getLength() ?? 0) : 0));
+	if (!node) {
+		return;
+	}
+
+	const checker = program.getTypeChecker();
+	const type = checker.getTypeAtLocation(node);
+	const props = type.getProperties();
+
+	return props.map(prop => prop.name);
+
+	function findPositionIdentifier(sourceFile: ts.SourceFile, node: ts.Node, offset: number) {
+
+		let result: ts.Node | undefined;
+
+		node.forEachChild(child => {
+			if (!result) {
+				if (child.end === offset && ts.isIdentifier(child)) {
+					result = child;
+				}
+				else if (child.end >= offset && child.getStart(sourceFile) < offset) {
+					result = findPositionIdentifier(sourceFile, child, offset);
+				}
+			}
+		});
+
+		return result;
+	}
+}
diff --git a/packages/typescript-plugin/src/namedPipe/requests/getQuickInfoAtPosition.ts b/packages/typescript-plugin/src/namedPipe/requests/getQuickInfoAtPosition.ts
new file mode 100644
index 0000000000..7a1015f066
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/requests/getQuickInfoAtPosition.ts
@@ -0,0 +1,14 @@
+import { getProject } from '../utils';
+
+export function getQuickInfoAtPosition(fileName: string, position: number) {
+
+	const match = getProject(fileName);
+	if (!match) {
+		return;
+	}
+
+	const { info } = match;
+	const languageService = info.languageService;
+
+	return languageService.getQuickInfoAtPosition(fileName, position);
+}
diff --git a/packages/typescript-plugin/src/namedPipe/server.ts b/packages/typescript-plugin/src/namedPipe/server.ts
new file mode 100644
index 0000000000..62f49afb54
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/server.ts
@@ -0,0 +1,72 @@
+import * as fs from 'fs';
+import * as net from 'net';
+import { pipeFile } from './utils';
+
+export interface Request {
+	type: 'collectExtractProps'
+	| 'getPropertiesAtLocation'
+	| 'getQuickInfoAtPosition'
+	// Component Infos
+	| 'getComponentProps'
+	| 'getComponentEvents'
+	| 'getTemplateContextProps'
+	| 'getComponentNames'
+	| 'getElementAttrs';
+	args: any;
+}
+
+let started = false;
+
+export function startNamedPipeServer() {
+	if (started) return;
+	started = true;
+	const server = net.createServer(connection => {
+		connection.on('data', async data => {
+			const request: Request = JSON.parse(data.toString());
+			if (request.type === 'collectExtractProps') {
+				const result = (await import('./requests/collectExtractProps.js')).collectExtractProps.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getPropertiesAtLocation') {
+				const result = (await import('./requests/getPropertiesAtLocation.js')).getPropertiesAtLocation.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getQuickInfoAtPosition') {
+				const result = (await import('./requests/getQuickInfoAtPosition.js')).getQuickInfoAtPosition.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			// Component Infos
+			else if (request.type === 'getComponentProps') {
+				const result = (await import('./requests/componentInfos.js')).getComponentProps.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getComponentEvents') {
+				const result = (await import('./requests/componentInfos.js')).getComponentEvents.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getTemplateContextProps') {
+				const result = (await import('./requests/componentInfos.js')).getTemplateContextProps.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getComponentNames') {
+				const result = (await import('./requests/componentInfos.js')).getComponentNames.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else if (request.type === 'getElementAttrs') {
+				const result = (await import('./requests/componentInfos.js')).getElementAttrs.apply(null, request.args);
+				connection.write(JSON.stringify(result ?? null));
+			}
+			else {
+				console.warn('[Vue Named Pipe Server] Unknown request type:', request.type);
+				connection.write(JSON.stringify(null));
+			}
+		});
+		connection.on('error', err => console.error('[Vue Named Pipe Server]', err.message));
+	});
+
+	try {
+		fs.unlinkSync(pipeFile);
+	} catch { }
+
+	server.listen(pipeFile);
+}
diff --git a/packages/typescript-plugin/src/namedPipe/utils.ts b/packages/typescript-plugin/src/namedPipe/utils.ts
new file mode 100644
index 0000000000..ff7f33cc6e
--- /dev/null
+++ b/packages/typescript-plugin/src/namedPipe/utils.ts
@@ -0,0 +1,19 @@
+import type * as ts from 'typescript';
+import type { FileRegistry, VueCompilerOptions } from '@vue/language-core';
+
+export const pipeFile = process.platform === 'win32' ? '\\\\.\\pipe\\vue-tsp' : '/tmp/vue-tsp';
+
+export const projects = new Map<ts.server.Project, {
+	info: ts.server.PluginCreateInfo;
+	files: FileRegistry;
+	ts: typeof ts;
+	vueOptions: VueCompilerOptions;
+}>();
+
+export function getProject(fileName: string) {
+	for (const [project, data] of projects) {
+		if (project.containsFile(fileName as ts.server.NormalizedPath)) {
+			return data;
+		}
+	}
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 36a9e860ca..69f31be891 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -166,9 +166,6 @@ importers:
       vscode-languageserver-protocol:
         specifier: ^3.17.5
         version: 3.17.5
-      vue-component-meta:
-        specifier: 1.8.27
-        version: link:../component-meta
 
   packages/language-service:
     dependencies:
@@ -196,6 +193,9 @@ importers:
       path-browserify:
         specifier: ^1.0.1
         version: 1.0.1
+      typescript-vue-plugin:
+        specifier: 1.8.27
+        version: link:../typescript-plugin
       volar-service-css:
         specifier: 0.0.31
         version: 0.0.31(@volar/language-service@2.1.0)
@@ -270,6 +270,13 @@ importers:
       '@vue/language-core':
         specifier: 1.8.27
         version: link:../language-core
+      '@vue/shared':
+        specifier: ^3.4.0
+        version: 3.4.20
+    devDependencies:
+      '@types/node':
+        specifier: latest
+        version: 20.11.21
 
   test-workspace:
     devDependencies: