diff --git a/.vscode/launch.json b/.vscode/launch.json
index b7718125c..2b3a8dff3 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -19,6 +19,23 @@
 				"script": "watch"
 			}
 		},
+		{
+			"name": "Launch Preview",
+			"type": "extensionHost",
+			"request": "launch",
+			"runtimeExecutable": "${execPath}",
+			"args": [
+				"--disable-extensions",
+				"--extensionDevelopmentPath=${workspaceRoot}/packages/vscode-vue-preview"
+			],
+			"outFiles": [
+				"${workspaceRoot}/*/*/out/**/*.js"
+			],
+			"preLaunchTask": {
+				"type": "npm",
+				"script": "watch"
+			}
+		},
 		{
 			"type": "extensionHost",
 			"request": "launch",
diff --git a/package.json b/package.json
index 2f098c3ff..7f01e655a 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,10 @@
 	"scripts": {
 		"build": "tsc -b tsconfig.build.json",
 		"build-ci": "tsc -b tsconfig.build-ci.json",
-		"watch": "npm run build && (npm run watch:base & npm run watch:vue & npm run watch:typescript-vue-plugin)",
+		"watch": "npm run build && (npm run watch:base & npm run watch:vue & npm run watch:vue-preview & npm run watch:typescript-vue-plugin)",
 		"watch:base": "tsc -b tsconfig.build.json -w",
 		"watch:vue": "cd ./packages/vscode-vue && npm run watch",
+		"watch:vue-preview": "cd ./packages/vscode-vue-preview && npm run watch",
 		"watch:typescript-vue-plugin": "cd ./packages/vscode-typescript-vue-plugin && npm run watch",
 		"prerelease": "npm run build && npm run test",
 		"version:test": "lerna version --exact --force-publish --yes --sync-workspace-lock --no-push --no-git-tag-version",
diff --git a/packages/vscode-vue-preview/.vscodeignore b/packages/vscode-vue-preview/.vscodeignore
new file mode 100644
index 000000000..aa3dc0da9
--- /dev/null
+++ b/packages/vscode-vue-preview/.vscodeignore
@@ -0,0 +1,5 @@
+out
+src
+scripts
+tsconfig.build.json
+tsconfig.build.tsbuildinfo
diff --git a/packages/vscode-vue-preview/LICENSE b/packages/vscode-vue-preview/LICENSE
new file mode 100644
index 000000000..b55e47a7e
--- /dev/null
+++ b/packages/vscode-vue-preview/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-present Johnson Chu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/vscode-vue/images/nuxt-logo.svg b/packages/vscode-vue-preview/images/nuxt-logo.svg
similarity index 100%
rename from packages/vscode-vue/images/nuxt-logo.svg
rename to packages/vscode-vue-preview/images/nuxt-logo.svg
diff --git a/packages/vscode-vue/images/preview-bg.png b/packages/vscode-vue-preview/images/preview-bg.png
similarity index 100%
rename from packages/vscode-vue/images/preview-bg.png
rename to packages/vscode-vue-preview/images/preview-bg.png
diff --git a/packages/vscode-vue/images/vite-logo.svg b/packages/vscode-vue-preview/images/vite-logo.svg
similarity index 100%
rename from packages/vscode-vue/images/vite-logo.svg
rename to packages/vscode-vue-preview/images/vite-logo.svg
diff --git a/packages/vscode-vue-preview/package.json b/packages/vscode-vue-preview/package.json
new file mode 100644
index 000000000..b299946ba
--- /dev/null
+++ b/packages/vscode-vue-preview/package.json
@@ -0,0 +1,135 @@
+{
+	"private": true,
+	"name": "vscode-vue-preview",
+	"version": "1.0.24",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/johnsoncodehk/volar.git",
+		"directory": "packages/vscode-vue-preview"
+	},
+	"sponsor": {
+		"url": "https://github.com/sponsors/johnsoncodehk"
+	},
+	"displayName": "Vue and Nuxt Preview (from Volar)",
+	"description": "Component and App Preview For Vue and Nuxt",
+	"author": "johnsoncodehk",
+	"publisher": "johnsoncodehk",
+	"engines": {
+		"vscode": "^1.67.0"
+	},
+	"activationEvents": [
+		"onLanguage:vue",
+		"onWebviewPanel:preview"
+	],
+	"main": "./dist/extension.js",
+	"contributes": {
+		"views": {
+			"explorer": [
+				{
+					"id": "vueComponentPreview",
+					"name": "Vue Component Preview",
+					"type": "webview",
+					"when": "volar.foundViteDir || volar.foundNuxtDir"
+				}
+			]
+		},
+		"languages": [
+			{
+				"id": "vue",
+				"extensions": [
+					".vue"
+				]
+			}
+		],
+		"configuration": {
+			"type": "object",
+			"title": "Volar",
+			"properties": {
+				"volar.preview.script.vite": {
+					"type": "string",
+					"default": "node {VITE_BIN} --port={PORT}"
+				},
+				"volar.preview.script.nuxi": {
+					"type": "string",
+					"default": "node {NUXI_BIN} dev --port {PORT}"
+				},
+				"volar.preview.port": {
+					"type": "number",
+					"default": 3333,
+					"description": "Default port for component preview server."
+				},
+				"volar.preview.root": {
+					"type": "string",
+					"default": ".",
+					"description": "Component preview root directory. (For Nuxt, it should be \"./src\" by default.)"
+				},
+				"volar.preview.backgroundColor": {
+					"type": "string",
+					"default": "#fff",
+					"description": "Component preview background color."
+				},
+				"volar.preview.transparentGrid": {
+					"type": "boolean",
+					"default": false,
+					"description": "Component preview background style."
+				}
+			}
+		},
+		"commands": [
+			{
+				"command": "volar.action.vite",
+				"title": "Experimental Features for Vite",
+				"category": "Volar",
+				"icon": "images/vite-logo.svg"
+			},
+			{
+				"command": "volar.action.nuxt",
+				"title": "Experimental Features for Nuxt",
+				"category": "Volar",
+				"icon": "images/nuxt-logo.svg"
+			}
+		],
+		"menus": {
+			"commandPalette": [
+				{
+					"command": "volar.action.vite",
+					"when": "editorLangId == vue"
+				},
+				{
+					"command": "volar.action.nuxt",
+					"when": "editorLangId == vue"
+				}
+			],
+			"editor/title": [
+				{
+					"command": "volar.action.vite",
+					"when": "editorLangId == vue && config.volar.icon.preview && volar.foundViteDir",
+					"group": "navigation"
+				},
+				{
+					"command": "volar.action.nuxt",
+					"when": "editorLangId == vue && config.volar.icon.preview && volar.foundNuxtDir",
+					"group": "navigation"
+				}
+			]
+		}
+	},
+	"scripts": {
+		"prebuild": "cd ../.. && npm run build",
+		"build": "node scripts/build",
+		"watch": "npm run build -- --watch",
+		"prepack": "npm run prebuild && npm run build -- --minify",
+		"pack": "npm run prepack && vsce package",
+		"release": "npm run prepack && vsce publish"
+	},
+	"devDependencies": {
+		"@types/vscode": "1.67.0",
+		"@volar/preview": "1.0.24",
+		"@volar/vscode-language-client": "1.2.0-alpha.9",
+		"esbuild": "0.15.18",
+		"esbuild-plugin-copy": "latest",
+		"typesafe-path": "^0.2.2",
+		"vscode-html-languageservice": "^5.0.4",
+		"vsce": "latest"
+	}
+}
diff --git a/packages/vscode-vue-preview/scripts/build.js b/packages/vscode-vue-preview/scripts/build.js
new file mode 100644
index 000000000..3e98bd5fd
--- /dev/null
+++ b/packages/vscode-vue-preview/scripts/build.js
@@ -0,0 +1,38 @@
+require('esbuild').build({
+	entryPoints: {
+		extension: './out/extension.js',
+	},
+	bundle: true,
+	metafile: process.argv.includes('--metafile'),
+	outdir: './dist',
+	external: [
+		'vscode',
+	],
+	format: 'cjs',
+	platform: 'node',
+	tsconfig: '../../tsconfig.build.json',
+	define: { 'process.env.NODE_ENV': '"production"' },
+	minify: process.argv.includes('--minify'),
+	watch: process.argv.includes('--watch'),
+	plugins: [
+		{
+			name: 'umd2esm',
+			setup(build) {
+				build.onResolve({ filter: /^(vscode-.*|estree-walker|jsonc-parser)/ }, args => {
+					const pathUmdMay = require.resolve(args.path, { paths: [args.resolveDir] })
+					// Call twice the replace is to solve the problem of the path in Windows
+					const pathEsm = pathUmdMay.replace('/umd/', '/esm/').replace('\\umd\\', '\\esm\\')
+					return { path: pathEsm }
+				})
+			},
+		},
+		require('esbuild-plugin-copy').copy({
+			resolveFrom: 'cwd',
+			assets: {
+				from: ['./node_modules/@volar/preview/bin/**/*'],
+				to: ['./dist/bin'],
+			},
+			keepStructure: true,
+		}),
+	],
+}).catch(() => process.exit(1))
diff --git a/packages/vscode-vue/src/features/preview.ts b/packages/vscode-vue-preview/src/extension.ts
similarity index 93%
rename from packages/vscode-vue/src/features/preview.ts
rename to packages/vscode-vue-preview/src/extension.ts
index 76a33b207..fb8fe1ce2 100644
--- a/packages/vscode-vue/src/features/preview.ts
+++ b/packages/vscode-vue-preview/src/extension.ts
@@ -1,12 +1,12 @@
 import * as vscode from 'vscode';
 import * as path from 'typesafe-path';
-import * as fs from '../utils/fs';
-import * as shared from '@volar/shared';
+import * as fs from './utils/fs';
 import { quickPick } from '@volar/vscode-language-client/out/common';
 import * as preview from '@volar/preview';
-import { getLocalHostAvailablePort } from '../utils/http';
-import { BaseLanguageClient } from 'vscode-languageclient';
-import { ParseSFCRequest } from '@volar/vue-language-server';
+import { getLocalHostAvailablePort } from './utils/http';
+import * as html from 'vscode-html-languageservice';
+
+const htmlLs = html.getLanguageService();
 
 const enum PreviewType {
 	Webview = 'volar-webview',
@@ -14,7 +14,7 @@ const enum PreviewType {
 	ExternalBrowser_Component = 'volar-component-preview',
 }
 
-export async function register(context: vscode.ExtensionContext, client: BaseLanguageClient) {
+export async function activate(context: vscode.ExtensionContext) {
 
 	let _loadingPanel: vscode.WebviewPanel | undefined;
 	let avoidUpdateOnDidChangeActiveTextEditor = false;
@@ -63,7 +63,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 		}
 	});
 
-	const sfcs = new WeakMap<vscode.TextDocument, { version: number, sfc: ParseSFCRequest.ResponseType; }>();
+	const templateOffsets = new WeakMap<vscode.TextDocument, { version: number, offset: number; }>();
 
 	class VueComponentPreview implements vscode.WebviewViewProvider {
 
@@ -138,7 +138,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 				}
 
 				const root = vscode.workspace.getConfiguration('volar').get<path.PosixPath>('preview.root')!;
-				const relativePath = shared.normalizeFileName(path.relative(path.resolve(path.dirname(configFile), root), fileName));
+				const relativePath = path.relative(path.resolve(path.dirname(configFile), root), fileName).replace(/\\/g, '/');
 				let url = `http://localhost:${port}/__preview${relativePath}#`;
 
 				if (lastPreviewDocument.isDirty) {
@@ -279,17 +279,20 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 
 	updatePreviewIconStatus();
 
-	async function getSfc(document: vscode.TextDocument) {
-		let cache = sfcs.get(document);
+	function getTemplateOffset(document: vscode.TextDocument) {
+		let cache = templateOffsets.get(document);
 		if (!cache || cache.version !== document.version) {
-			const parsed = await client.sendRequest(ParseSFCRequest.type, document.getText());
-			cache = {
-				version: document.version,
-				sfc: parsed,
-			};
-			sfcs.set(document, cache);
+			templateOffsets.delete(document);
+			const htmlDocument = htmlLs.parseHTMLDocument(html.TextDocument.create(document.uri.toString(), document.languageId, document.version, document.getText()));
+			const template = htmlDocument.roots.find(node => node.tag === 'template');
+			if (template?.startTagEnd !== undefined) {
+				templateOffsets.set(document, {
+					version: document.version,
+					offset: template.startTagEnd,
+				});
+			}
 		}
-		return cache.sfc;
+		return templateOffsets.get(document)?.offset ?? 0;
 	}
 
 	async function updatePreviewIconStatus() {
@@ -305,8 +308,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 
 	async function updateSelectionHighlights(textEditor: vscode.TextEditor) {
 		if (connection && textEditor.document.languageId === 'vue' && highlightDomElements) {
-			const sfc = await getSfc(textEditor.document);
-			const offset = sfc.descriptor.template?.loc.start.offset ?? 0;
+			const offset = await getTemplateOffset(textEditor.document);
 			connection.highlight(
 				textEditor.document.fileName,
 				textEditor.selections.map(selection => ({
@@ -369,7 +371,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 		}
 		else if (previewType === PreviewType.ExternalBrowser_Component) {
 			const root = vscode.workspace.getConfiguration('volar').get<path.PosixPath>('preview.root')!;
-			const relativePath = shared.normalizeFileName(path.relative(path.resolve(path.dirname(configFile), root), fileName));
+			const relativePath = path.relative(path.resolve(path.dirname(configFile), root), fileName).replace(/\\/g, '/');
 			loadingPanel.webview.html = getWebviewContent(`http://localhost:${port}/__preview${relativePath}`, undefined, 'openExternal');
 		}
 		else if (previewType === PreviewType.Webview) {
@@ -419,8 +421,7 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 		if (cancelToken.isCancelled)
 			return;
 
-		const sfc = await getSfc(doc);
-		const offset = sfc.descriptor.template?.loc.start.offset ?? 0;
+		const offset = await getTemplateOffset(doc);
 		const start = doc.positionAt(range[0] + offset);
 		const end = doc.positionAt(range[1] + offset);
 		await vscode.window.showTextDocument(doc, vscode.ViewColumn.One);
@@ -441,10 +442,10 @@ export async function register(context: vscode.ExtensionContext, client: BaseLan
 		let script = await vscode.workspace.getConfiguration('volar').get<string>('preview.script.' + (type === 'nuxt' ? 'nuxi' : 'vite')) ?? '';
 
 		if (script.indexOf('{VITE_BIN}') >= 0) {
-			script = script.replace('{VITE_BIN}', JSON.stringify(require.resolve('./dist/preview-bin/vite', { paths: [context.extensionPath] })));
+			script = script.replace('{VITE_BIN}', JSON.stringify(require.resolve('./dist/bin/vite', { paths: [context.extensionPath] })));
 		}
 		if (script.indexOf('{NUXI_BIN}') >= 0) {
-			script = script.replace('{NUXI_BIN}', JSON.stringify(require.resolve('./dist/preview-bin/nuxi', { paths: [context.extensionPath] })));
+			script = script.replace('{NUXI_BIN}', JSON.stringify(require.resolve('./dist/bin/nuxi', { paths: [context.extensionPath] })));
 		}
 		if (script.indexOf('{PORT}') >= 0) {
 			script = script.replace('{PORT}', port.toString());
diff --git a/packages/vscode-vue/src/utils/fs.ts b/packages/vscode-vue-preview/src/utils/fs.ts
similarity index 100%
rename from packages/vscode-vue/src/utils/fs.ts
rename to packages/vscode-vue-preview/src/utils/fs.ts
diff --git a/packages/vscode-vue/src/utils/http.ts b/packages/vscode-vue-preview/src/utils/http.ts
similarity index 100%
rename from packages/vscode-vue/src/utils/http.ts
rename to packages/vscode-vue-preview/src/utils/http.ts
diff --git a/packages/vscode-vue-preview/tsconfig.build.json b/packages/vscode-vue-preview/tsconfig.build.json
new file mode 100644
index 000000000..f58d9eb23
--- /dev/null
+++ b/packages/vscode-vue-preview/tsconfig.build.json
@@ -0,0 +1,16 @@
+{
+	"extends": "../../tsconfig.json",
+	"compilerOptions": {
+		"noEmit": false,
+		"outDir": "out",
+		"rootDir": "src",
+	},
+	"include": [
+		"src",
+	],
+	"references": [
+		{
+			"path": "../preview/tsconfig.build.json"
+		}
+	]
+}
\ No newline at end of file
diff --git a/packages/vscode-vue/package.json b/packages/vscode-vue/package.json
index c27f7ebbb..1ceef182e 100644
--- a/packages/vscode-vue/package.json
+++ b/packages/vscode-vue/package.json
@@ -28,8 +28,7 @@
 		"onLanguage:javascript",
 		"onLanguage:typescript",
 		"onLanguage:javascriptreact",
-		"onLanguage:typescriptreact",
-		"onWebviewPanel:preview"
+		"onLanguage:typescriptreact"
 	],
 	"main": "client",
 	"browser": "dist/browser/client",
@@ -45,16 +44,6 @@
 		}
 	},
 	"contributes": {
-		"views": {
-			"explorer": [
-				{
-					"id": "vueComponentPreview",
-					"name": "Vue Component Preview",
-					"type": "webview",
-					"when": "volar.foundViteDir || volar.foundNuxtDir"
-				}
-			]
-		},
 		"jsonValidation": [
 			{
 				"fileMatch": "tsconfig.json",
@@ -439,11 +428,6 @@
 					"default": false,
 					"description": "Show split editor icon in title area of editor."
 				},
-				"volar.icon.preview": {
-					"type": "boolean",
-					"default": true,
-					"description": "Show Vite / Nuxt App preview icon."
-				},
 				"volar.doctor.statusBarItem": {
 					"type": "boolean",
 					"default": true,
@@ -574,34 +558,6 @@
 					"default": true,
 					"description": "Normalize import name for auto import. (\"myCompVue\" -> \"MyComp\")"
 				},
-				"volar.preview.script.vite": {
-					"type": "string",
-					"default": "node {VITE_BIN} --port={PORT}"
-				},
-				"volar.preview.script.nuxi": {
-					"type": "string",
-					"default": "node {NUXI_BIN} dev --port {PORT}"
-				},
-				"volar.preview.port": {
-					"type": "number",
-					"default": 3333,
-					"description": "Default port for component preview server."
-				},
-				"volar.preview.root": {
-					"type": "string",
-					"default": ".",
-					"description": "Component preview root directory. (For Nuxt, it should be \"./src\" by default.)"
-				},
-				"volar.preview.backgroundColor": {
-					"type": "string",
-					"default": "#fff",
-					"description": "Component preview background color."
-				},
-				"volar.preview.transparentGrid": {
-					"type": "boolean",
-					"default": false,
-					"description": "Component preview background style."
-				},
 				"volar.splitEditors.layout.left": {
 					"type": "array",
 					"default": [
@@ -738,16 +694,6 @@
 					"command": "volar.action.splitEditors",
 					"when": "resourceLangId == vue && config.volar.icon.splitEditors",
 					"group": "navigation"
-				},
-				{
-					"command": "volar.action.vite",
-					"when": "editorLangId == vue && config.volar.icon.preview && volar.foundViteDir",
-					"group": "navigation"
-				},
-				{
-					"command": "volar.action.nuxt",
-					"when": "editorLangId == vue && config.volar.icon.preview && volar.foundNuxtDir",
-					"group": "navigation"
 				}
 			],
 			"explorer/context": [
@@ -817,7 +763,6 @@
 	"devDependencies": {
 		"@types/semver": "^7.3.13",
 		"@types/vscode": "1.67.0",
-		"@volar/preview": "1.0.24",
 		"@volar/shared": "1.2.0-alpha.9",
 		"@volar/source-map": "1.2.0-alpha.9",
 		"@volar/vscode-language-client": "1.2.0-alpha.9",
diff --git a/packages/vscode-vue/scripts/build-node.js b/packages/vscode-vue/scripts/build-node.js
index 5d6541af8..e188b06e3 100644
--- a/packages/vscode-vue/scripts/build-node.js
+++ b/packages/vscode-vue/scripts/build-node.js
@@ -34,14 +34,6 @@ require('esbuild').build({
 				})
 			},
 		},
-		require('esbuild-plugin-copy').copy({
-			resolveFrom: 'cwd',
-			assets: {
-				from: ['./node_modules/@volar/preview/bin/**/*'],
-				to: ['./dist/preview-bin'],
-			},
-			keepStructure: true,
-		}),
 		require('esbuild-plugin-copy').copy({
 			resolveFrom: 'cwd',
 			assets: {
diff --git a/packages/vscode-vue/src/nodeClientMain.ts b/packages/vscode-vue/src/nodeClientMain.ts
index 6d7d57369..154d91bd4 100644
--- a/packages/vscode-vue/src/nodeClientMain.ts
+++ b/packages/vscode-vue/src/nodeClientMain.ts
@@ -6,7 +6,6 @@ import * as vscode from 'vscode';
 import * as lsp from 'vscode-languageclient/node';
 import { activate as commonActivate, deactivate as commonDeactivate, getDocumentSelector } from './common';
 import { middleware } from './middleware';
-import * as preview from './features/preview';
 
 export function activate(context: vscode.ExtensionContext) {
 
@@ -76,10 +75,6 @@ export function activate(context: vscode.ExtensionContext) {
 		);
 		client.start();
 
-		if (initOptions.serverMode === ServerMode.Semantic) {
-			preview.register(context, client);
-		}
-
 		return client;
 	});
 }
diff --git a/packages/vscode-vue/tsconfig.build.json b/packages/vscode-vue/tsconfig.build.json
index 3d3fca89b..178404123 100644
--- a/packages/vscode-vue/tsconfig.build.json
+++ b/packages/vscode-vue/tsconfig.build.json
@@ -16,9 +16,6 @@
 	"references": [
 		{
 			"path": "../vue-language-server/tsconfig.build.json"
-		},
-		{
-			"path": "../preview/tsconfig.build.json"
 		}
 	]
 }
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f468fc6e..d06f7e902 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,7 +12,7 @@ importers:
       vite: latest
       vitest: 0.25.8
     optionalDependencies:
-      '@lerna-lite/cli': 1.15.0
+      '@lerna-lite/cli': 1.15.1
       '@vscode/test-web': 0.0.34
     devDependencies:
       '@types/node': 18.13.0
@@ -57,7 +57,6 @@ importers:
     specifiers:
       '@types/semver': ^7.3.13
       '@types/vscode': 1.67.0
-      '@volar/preview': 1.0.24
       '@volar/shared': 1.2.0-alpha.9
       '@volar/source-map': 1.2.0-alpha.9
       '@volar/vscode-language-client': 1.2.0-alpha.9
@@ -76,7 +75,6 @@ importers:
     devDependencies:
       '@types/semver': 7.3.13
       '@types/vscode': 1.67.0
-      '@volar/preview': link:../preview
       '@volar/shared': 1.2.0-alpha.9
       '@volar/source-map': 1.2.0-alpha.9
       '@volar/vscode-language-client': 1.2.0-alpha.9_lr35k6ga5htpxuznotx4jg7nl4
@@ -93,6 +91,26 @@ importers:
       vscode-languageclient: 8.0.2
       vscode-nls: 5.2.0
 
+  packages/vscode-vue-preview:
+    specifiers:
+      '@types/vscode': 1.67.0
+      '@volar/preview': 1.0.24
+      '@volar/vscode-language-client': 1.2.0-alpha.9
+      esbuild: 0.15.18
+      esbuild-plugin-copy: latest
+      typesafe-path: ^0.2.2
+      vsce: latest
+      vscode-html-languageservice: ^5.0.4
+    devDependencies:
+      '@types/vscode': 1.67.0
+      '@volar/preview': link:../preview
+      '@volar/vscode-language-client': 1.2.0-alpha.9_@types+vscode@1.67.0
+      esbuild: 0.15.18
+      esbuild-plugin-copy: 2.0.2_esbuild@0.15.18
+      typesafe-path: 0.2.2
+      vsce: 2.15.0
+      vscode-html-languageservice: 5.0.4
+
   packages/vue-component-meta:
     specifiers:
       '@volar/language-core': 1.2.0-alpha.9
@@ -550,18 +568,17 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/cli/1.15.0:
-    resolution: {integrity: sha512-dlPwhwXvyiFBcYpP4kOVaCSFVhTUsQgieLQZUky2Plpyqk+vHB52O8ehLrZOyWgcsrE2DyOQt82OoVziBkbiUw==}
+  /@lerna-lite/cli/1.15.1:
+    resolution: {integrity: sha512-tpR/NPdX65AzprU6F1IH3hsAullmnYaO4MJOk3f6HCEfxcqUchbTLtzBonSYFNTgEc005Bt8EfejLz+o4zlKyQ==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@lerna-lite/core': 1.15.0
-      '@lerna-lite/info': 1.15.0
-      '@lerna-lite/init': 1.15.0
-      '@lerna-lite/listable': 1.15.0
-      '@lerna-lite/publish': 1.15.0
-      '@lerna-lite/version': 1.15.0
+      '@lerna-lite/core': 1.15.1
+      '@lerna-lite/init': 1.15.1
+      '@lerna-lite/listable': 1.15.1
+      '@lerna-lite/publish': 1.15.1
+      '@lerna-lite/version': 1.15.1
       dedent: 0.7.0
       dotenv: 16.0.3
       import-local: 3.1.0
@@ -576,8 +593,8 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/core/1.15.0:
-    resolution: {integrity: sha512-NpG5rJtGr2d5bSitdIBpXDMp19gK7CmB48U+Q3WHnWbBbzNJ3nCOZhQWTQ2OFOQ8fgtQ8idyCKREBZ+vnB0XzQ==}
+  /@lerna-lite/core/1.15.1:
+    resolution: {integrity: sha512-NRg2OZ44j+RHtWFC6tqzweO3gB+c1kU7EYsh5OCDUid0/U3+2OAxbq/WLaq/u0GUnLeXqVmCcb3231vi1noSCg==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     dependencies:
       '@npmcli/run-script': 6.0.0
@@ -593,7 +610,7 @@ packages:
       inquirer: 8.2.5
       is-ci: 3.0.1
       load-json-file: 6.2.0
-      minimatch: 5.1.6
+      minimatch: 6.1.6
       npm-package-arg: 10.1.0
       npmlog: 7.0.1
       p-map: 4.0.0
@@ -612,23 +629,11 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/info/1.15.0:
-    resolution: {integrity: sha512-JDyhfePqejMRq8Vgl7dXPqlZ1WVopCJHC4PakfNwKKtUoOqhlmChSuPq35WOpgTSV704Vu4PVCwrcPhJ5YtnKQ==}
-    engines: {node: '>=14.17.0', npm: '>=8.0.0'}
-    dependencies:
-      '@lerna-lite/core': 1.15.0
-      envinfo: 7.8.1
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
-    dev: false
-    optional: true
-
-  /@lerna-lite/init/1.15.0:
-    resolution: {integrity: sha512-+dgTGk7TYyRTn/3MDobbn1OduP9FnN+xb+IdMlwV+IbpnMwESwtwYf9ffFWDADwFcnhOgtG/TnuxXsXtVrHRqg==}
+  /@lerna-lite/init/1.15.1:
+    resolution: {integrity: sha512-DOPTGT8tU9pETTjDgzBLVrKksC5CHiKnccIcurShHZ53SiA2t59MTD7dQ9rvnh4UQNyfnuAkWy+gNKnqR1IL5Q==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     dependencies:
-      '@lerna-lite/core': 1.15.0
+      '@lerna-lite/core': 1.15.1
       fs-extra: 11.1.0
       p-map: 4.0.0
       path: 0.12.7
@@ -639,11 +644,11 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/listable/1.15.0:
-    resolution: {integrity: sha512-oMQ7CRa3iOSG+2b+H1ozKi5JHixnkf/LfWu2oKMT8AXlxiJWV0xRayhFAflJY4SkZAFiDJjg2a8eppS7xSycwA==}
+  /@lerna-lite/listable/1.15.1:
+    resolution: {integrity: sha512-XXBYjYDLVX/AZ92mu9RuJaXTjk/ly5SMSIezGiN1s7DwYGJO0bBK27Ev2xdn0H7TfXnptkT+G2k0cl8GMVVbhA==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     dependencies:
-      '@lerna-lite/core': 1.15.0
+      '@lerna-lite/core': 1.15.1
       chalk: 4.1.2
       columnify: 1.6.0
     transitivePeerDependencies:
@@ -652,21 +657,21 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/publish/1.15.0:
-    resolution: {integrity: sha512-9n2L6DeqXdBmmZgsx/kMFaszXKWAP1ZhoImWpgjz/jVokh5TMUjKNxR8Rsubl/UiiDr3UFywTkfgSm+5jzB8sw==}
+  /@lerna-lite/publish/1.15.1:
+    resolution: {integrity: sha512-QlkElCvFTXN++gXjBRigGpWfOihNUJs4+O49Rhk2hvHzjw66VEYCGuXogGASbbuPz5tCNbH/toIqEM6664KtAg==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     dependencies:
-      '@lerna-lite/core': 1.15.0
-      '@lerna-lite/version': 1.15.0
-      '@npmcli/arborist': 6.2.1
+      '@lerna-lite/core': 1.15.1
+      '@lerna-lite/version': 1.15.1
+      '@npmcli/arborist': 6.2.2
       byte-size: 7.0.1
       chalk: 4.1.2
       columnify: 1.6.0
       fs-extra: 11.1.0
       glob: 7.2.3
       has-unicode: 2.0.1
-      libnpmaccess: 7.0.1
-      libnpmpublish: 7.0.6
+      libnpmaccess: 7.0.2
+      libnpmpublish: 7.0.8
       npm-package-arg: 10.1.0
       npm-packlist: 7.0.4
       npm-registry-fetch: 14.0.3
@@ -688,11 +693,11 @@ packages:
     dev: false
     optional: true
 
-  /@lerna-lite/version/1.15.0:
-    resolution: {integrity: sha512-E2p6W6s+2AxVLneiEkHPvRxQWFwZzQ6jCUt48P0j7pOVoaCivBWls8cV0jaen2me9MpyfPcTRMJZ6nA4ou8aig==}
+  /@lerna-lite/version/1.15.1:
+    resolution: {integrity: sha512-jFrGdPEeqAILsqbSX7H96qP0XUBSdCgM6xDo4hj6dWSyMbm3ekhtkUOMrQpoEXSYRWylVQTzhXDJH46lTO/Ylw==}
     engines: {node: '>=14.17.0', npm: '>=8.0.0'}
     dependencies:
-      '@lerna-lite/core': 1.15.0
+      '@lerna-lite/core': 1.15.1
       '@octokit/plugin-enterprise-rest': 6.0.1
       '@octokit/rest': 19.0.7
       chalk: 4.1.2
@@ -709,7 +714,7 @@ packages:
       is-stream: 2.0.1
       load-json-file: 6.2.0
       make-dir: 3.1.0
-      minimatch: 5.1.6
+      minimatch: 6.1.6
       new-github-release-url: 1.0.0
       node-fetch: 2.6.7
       npm-package-arg: 10.1.0
@@ -749,17 +754,17 @@ packages:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.14.0
 
-  /@npmcli/arborist/6.2.1:
-    resolution: {integrity: sha512-5bpihPqBgAMdOoM7pCeziVVP5NHmAqnjTUq9v8qrzrFcesEbBRpeiD0h3M4tw16NtQ6f024sI6EvWASUrxTHHw==}
+  /@npmcli/arborist/6.2.2:
+    resolution: {integrity: sha512-cjK9CuA1cEovr4E1ljdgYU1UBdKJb4KvvULAEYOM1/qU0Que2X4DKyjIDBEy8MSWRY6PyaQ8oLGhwYIh8gUEEA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
     dependencies:
       '@isaacs/string-locale-compare': 1.1.0
       '@npmcli/fs': 3.1.0
       '@npmcli/installed-package-contents': 2.0.1
-      '@npmcli/map-workspaces': 3.0.1
+      '@npmcli/map-workspaces': 3.0.2
       '@npmcli/metavuln-calculator': 5.0.0
-      '@npmcli/name-from-folder': 1.0.1
+      '@npmcli/name-from-folder': 2.0.0
       '@npmcli/node-gyp': 3.0.0
       '@npmcli/package-json': 3.0.0
       '@npmcli/query': 3.0.0
@@ -770,7 +775,7 @@ packages:
       hosted-git-info: 6.1.1
       json-parse-even-better-errors: 3.0.0
       json-stringify-nice: 1.1.4
-      minimatch: 5.1.6
+      minimatch: 6.1.6
       nopt: 7.0.0
       npm-install-checks: 6.0.0
       npm-package-arg: 10.1.0
@@ -838,13 +843,13 @@ packages:
     dev: false
     optional: true
 
-  /@npmcli/map-workspaces/3.0.1:
-    resolution: {integrity: sha512-QXwE2p5zRTP6X8Irgf/swYwwdQEalSA1GBm0IGE/86R5EJbUGgKMOP0kOjaJWJxaWPkSqyhM8N50SPxFHTfkNg==}
+  /@npmcli/map-workspaces/3.0.2:
+    resolution: {integrity: sha512-bCEC4PG7HbadtAYkW/TTUVNEOSr5Dhfmv6yGLgByJgCvdCqq7teq09cjvJ1LhzJU/euWjvYMcQxsfj7yDD2ikg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       '@npmcli/name-from-folder': 2.0.0
       glob: 8.0.3
-      minimatch: 5.1.6
+      minimatch: 6.1.6
       read-package-json-fast: 3.0.2
     dev: false
     optional: true
@@ -873,11 +878,6 @@ packages:
     dev: false
     optional: true
 
-  /@npmcli/name-from-folder/1.0.1:
-    resolution: {integrity: sha512-qq3oEfcLFwNfEYOQ8HLimRGKlD8WSeGEdtUa7hmzpR8Sa7haL1KVQrvgO6wqMjhWFFVjgtrh1gIxDz+P8sjUaA==}
-    dev: false
-    optional: true
-
   /@npmcli/name-from-folder/2.0.0:
     resolution: {integrity: sha512-pwK+BfEBZJbKdNYpHHRTNBwBoqrN/iIMO0AiGvYsp3Hoaq0WbgGSWQR6SCldZovoDpY3yje5lkFUe6gsDgJ2vg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -1360,6 +1360,20 @@ packages:
       '@volar/language-core': 1.2.0-alpha.9
     dev: false
 
+  /@volar/vscode-language-client/1.2.0-alpha.9_@types+vscode@1.67.0:
+    resolution: {integrity: sha512-J/T415nSMh30QgdzhIHsKu0aT+Y0B3OIxWmmevB1N3ZW6F458bk/cZkoum3FNtsHoJSQwINx7iC9gL6z9yptvQ==}
+    peerDependencies:
+      '@types/vscode': '*'
+      vscode-languageclient: '*'
+    dependencies:
+      '@types/vscode': 1.67.0
+      '@volar/language-server': 1.2.0-alpha.9
+      '@volar/shared': 1.2.0-alpha.9
+      '@volar/source-map': 1.2.0-alpha.9
+      typesafe-path: 0.2.2
+      vscode-nls: 5.2.0
+    dev: true
+
   /@volar/vscode-language-client/1.2.0-alpha.9_lr35k6ga5htpxuznotx4jg7nl4:
     resolution: {integrity: sha512-J/T415nSMh30QgdzhIHsKu0aT+Y0B3OIxWmmevB1N3ZW6F458bk/cZkoum3FNtsHoJSQwINx7iC9gL6z9yptvQ==}
     peerDependencies:
@@ -2577,13 +2591,6 @@ packages:
     dev: false
     optional: true
 
-  /envinfo/7.8.1:
-    resolution: {integrity: sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==}
-    engines: {node: '>=4'}
-    hasBin: true
-    dev: false
-    optional: true
-
   /err-code/2.0.3:
     resolution: {integrity: sha512-2bmlRpNKBxT/CRmPOlyISQpNj+qSeYvcym/uT0Jx2bMOlKLtSy1ZmLuVxSEKKyor/N5yhvp/ZiG1oE3DEYMSFA==}
     dev: false
@@ -3865,8 +3872,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /libnpmaccess/7.0.1:
-    resolution: {integrity: sha512-fvKKAXW1v3YfekgYEJi0eCur9ZD9gJ7akWxfwzad/zxzmD2ylk0K9BRhhcTRIWdFgdCr0oQe3ea0R0gUMeaPhQ==}
+  /libnpmaccess/7.0.2:
+    resolution: {integrity: sha512-vHBVMw1JFMTgEk15zRsJuSAg7QtGGHpUSEfnbcRL1/gTBag9iEfJbyjpDmdJmwMhvpoLoNBtdAUCdGnaP32hhw==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       npm-package-arg: 10.1.0
@@ -3877,8 +3884,8 @@ packages:
     dev: false
     optional: true
 
-  /libnpmpublish/7.0.6:
-    resolution: {integrity: sha512-3KbZaY6z+no5InP7d5GDyHPSSBBfew/ofwwD/rkX78zGNXz+S6VcLLLueX1XLdTY7r8TiAJy3cRQ0U9DxfK/YQ==}
+  /libnpmpublish/7.0.8:
+    resolution: {integrity: sha512-HvcZbqt5z7bOdzaYjb46DkIWeAHb1E9UWTHHFdMIZJKrYAY6TEY1luI1PZ70/BL3mPfmjpZpsGsfP0Du1kMUPA==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     dependencies:
       normalize-package-data: 5.0.0
diff --git a/tsconfig.build.json b/tsconfig.build.json
index db3107a4d..51b66a404 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -6,6 +6,9 @@
 		{
 			"path": "./packages/vscode-vue/tsconfig.build.json"
 		},
+		{
+			"path": "./packages/vscode-vue-preview/tsconfig.build.json"
+		},
 		{
 			"path": "./packages/vscode-typescript-vue-plugin/tsconfig.build.json"
 		},