v3.2.0 (#5870)

Author: johnsoncodehk

CHANGELOG.md

@@ -1,5 +1,63 @@
 # Changelog
 
+## 3.2.0 (2025-12-20)
+
+### vscode
+
+- **fix:** Vue TS highlighting when trailing type alias is missing semicolon (#5853) - Thanks to @serkodev!
+- **perf:** replace `fast-diff` with custom character-by-character alignment algorithm (#5849) (#5851)
+- **refactor:** update Vue grammar scope name to "text.html.vue" (#5856)
+- **test:** add test for embedded grammars (#5861) - Thanks to @serkodev!
+
+### language-service
+
+- **feat:** rich hover message (#5881)
+- **feat:** support markdown JSDoc for rich hover message description (#5890) - Thanks to @serkodev!
+- **chore:** adjust rich hover message title layout (#5889) - Thanks to @serkodev!
+
+### component-meta
+
+- **feat:** add `tags` to slots and exposed (#5862) - Thanks to @aj-dev!
+- **feat:** filter out irrelevant properties from `exposed` (#5868) - Thanks to @aj-dev!
+- **refactor:** redundant logic between deduplication and language-core (#5875)
+- **refactor:** de-dependency from component-type-helpers (#5876)
+- **refactor:** search prop defaults with symbol declarations (#5879)
+- **refactor:** deprecate "noDeclarations" and "forceUseTs" options (#5887)
+
+### typescript-plugin
+
+- **feat:** include leading dot when finding references to CSS classes (#5852)
+- **fix:** missing module error after file rename (#5839) - Thanks to @serkodev!
+- **fix:** prioritize non-warning completion entries over warning ones (#5847)
+- **fix:** always pass rest parameters for future compatibility (#5859) - Thanks to @KazariEX!
+- **fix:** add nullish guards before accessing `ts.CompletionEntryData` (#5869) - Thanks to @KazariEX!
+- **fix:** handle import type nodes in definition proxy (#5873)
+- **fix:** handle type imports in component auto-import(#5874)
+
+### language-core
+
+- **feat:** revert overcorrection of `v-for` type inference (#5836)
+- **feat:** align `v-for` key type with `Object.keys` (#5837) - Thanks to @serkodev!
+- **feat:** narrow component and directive types (#5841)
+- **feat:** support `<!-- @strictTemplates -->` magic comment (#5845)
+- **fix:** correctly resolve `<script src="">` (#5838)
+- **fix:** preserve template slot wrappers during `createIfBranch` (#5844) - Thanks to @serkodev!
+- **fix:** include end tag locations when renaming global components
+- **refactor:** replace dynamic types generation with static files (#5872)
+- **refactor:** improve Vue version detection and plugin resolution
+
+### component-type-helpers
+
+- **refactor:** remove `ComponentType` helper
+
+### workspace
+
+- **chore:** update testing infrastructure (#5848)
+- **chore:** use tsgo in development (#5860)
+- **chore:** reduce local dependencies and update workflows (#5863)
+- **chore:** upgrade tsslint and vite to pre-release versions
+- **chore:** delete tests for Vue 3.4 (#5871)
+
 ## 3.1.8 (2025-12-09)
 
 ### Features

extensions/vscode/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "volar",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/vuejs/language-tools.git",

extensions/vscode/src/generated-meta.ts

@@ -4,7 +4,7 @@
 // Meta info
 export const publisher = 'Vue';
 export const name = 'volar';
-export const version = '3.1.5';
+export const version = '3.2.0';
 export const displayName = 'Vue (Official)';
 export const description = 'Language Support for Vue';
 export const extensionId = `${publisher}.${name}`;
@@ -17,7 +17,7 @@ export type CommandKey =
 	| 'vue.action.restartServer';
 
 /**
- * Commands map registed by `Vue.volar`
+ * Commands map registered by `Vue.volar`
  */
 export const commands = {
 	/**
@@ -32,6 +32,25 @@ export const commands = {
 	actionRestartServer: 'vue.action.restartServer',
 } satisfies Record<string, CommandKey>;
 
+/**
+ * Type union of all languages
+ */
+export type LanguageKey =
+	| 'vue'
+	| 'markdown'
+	| 'html'
+	| 'jade';
+
+/**
+ * Languages map registed by `Vue.volar`
+ */
+export const languages = {
+	vue: 'vue',
+	markdown: 'markdown',
+	html: 'html',
+	jade: 'jade',
+} satisfies Record<string, LanguageKey>;
+
 /**
  * Type union of all configs
  */

extensions/vscode/src/welcome.ts

@@ -1,6 +1,6 @@
 import * as vscode from 'vscode';
 
-const popVersion = '3.1.0';
+const popVersion = '3.2.0';
 
 let panel: vscode.WebviewPanel | undefined;
 
@@ -31,6 +31,9 @@ export function execute(context: vscode.ExtensionContext) {
 			case 'toggleShowUpdates':
 				context.globalState.update('vue.showUpdates', message.value);
 				break;
+			case 'openUrl':
+				vscode.env.openExternal(vscode.Uri.parse(message.url));
+				break;
 		}
 	});
 	panel.onDidDispose(() => panel = undefined);
@@ -131,12 +134,6 @@ function getWelcomeHtml(context: vscode.ExtensionContext) {
 			box-shadow: 0 2px 8px var(--vscode-widget-shadow);
 		}
 
-		.whats-new-card {
-			max-height: 250px;
-			overflow-y: auto;
-			overflow-x: hidden;
-		}
-
 		.sponsors-card #sponsors-container svg {
 			width: 100% !important;
 			height: auto !important;
@@ -327,138 +324,23 @@ function getWelcomeHtml(context: vscode.ExtensionContext) {
 			<input type="checkbox" onchange="toggleShowUpdates(this.checked)" ${
 		context.globalState.get<boolean>('vue.showUpdates', true) ? 'checked' : ''
 	}>
-			<span>Show release notes on update</span>
+			<span>Show this page on update</span>
 		</label>
 	</div>
 
-	<div class="card whats-new-card">
-		<h3>3.1.0</h3>
-		<ul style="margin: 0; padding-left: 1.25rem;">
-			<li>🚀 Significantly improve the TypeScript performance of virtual code (<a href="https://github.com/vuejs/language-tools/pull/5532" target="_blank">Learn More</a>)</li>
-		</ul>
-		<div
-			style="margin-top: 1rem; padding: 0.75rem; background-color: var(--vscode-inputValidation-warningBackground); border-radius: 4px;">
-			<strong>⚠️ Vue 2 and vue-class-component support has been removed, please refer to <a href="https://github.com/vuejs/language-tools/discussions/5455" target="_blank">Discussion #5455</a> for detail.</strong>
-		</div>
-		<div
-			style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
-			<a href="https://github.com/vuejs/language-tools/releases/tag/v3.1.0" target="_blank"
-				style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-					<path
-						d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-				</svg>
-				Full Release Notes
-			</a>
-			<div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
-				<span>Released: October 2025</span>
-				<span>•</span>
-				<span>v3.1.0</span>
-			</div>
-		</div>
-		<br>
-
-		<h3>3.0.7</h3>
-		<ul style="margin: 0; padding-left: 1.25rem;">
-			<li>✨ The following features are now available for free:</li>
-			<ul style="margin: 0; padding-left: 1.25rem;">
-				<li>🧩 Interpolation Highlight</li>
-				<li>🧩 Focus Mode (disabled by default)</li>
-				<li>🧩 Reactivity Visualization</li>
-			</ul>
-			<li>🐛 4+ bug fixes</li>
-		</ul>
-		<div
-			style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
-			<a href="https://github.com/vuejs/language-tools/releases/tag/v3.0.7" target="_blank"
-				style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-					<path
-						d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-				</svg>
-				Full Release Notes
-			</a>
-			<div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
-				<span>Released: September 2025</span>
-				<span>•</span>
-				<span>v3.0.7</span>
-			</div>
-		</div>
-		<br>
-
-		<h3>3.0.6</h3>
-		<ul style="margin: 0; padding-left: 1.25rem;">
-			<li>🚀 Expandable Hovers support for TypeScript (<a href="https://code.visualstudio.com/updates/v1_100#_expandable-hovers-for-javascript-and-typescript-experimental" target="_blank">Learn More</a>)</li>
-			<li>🐛 8+ bug fixes</li>
-		</ul>
-		<div
-			style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
-			<a href="https://github.com/vuejs/language-tools/releases/tag/v3.0.6" target="_blank"
-				style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-					<path
-						d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-				</svg>
-				Full Release Notes
-			</a>
-			<div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
-				<span>Released: August 2025</span>
-				<span>•</span>
-				<span>v3.0.6</span>
-			</div>
-		</div>
-		<br>
-
-		<h3>3.0.2</h3>
-		<ul style="margin: 0; padding-left: 1.25rem;">
-			<li>🚀 Improve memory usage in extreme cases</li>
-			<li>🐛 15+ bug fixes</li>
-		</ul>
-		<div
-			style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
-			<a href="https://github.com/vuejs/language-tools/releases/tag/v3.0.2" target="_blank"
-				style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-					<path
-						d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-				</svg>
-				Full Release Notes
-			</a>
-			<div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
-				<span>Released: July 2025</span>
-				<span>•</span>
-				<span>v3.0.2</span>
-			</div>
-		</div>
-		<br>
-
-		<h3>3.0.0</h3>
-		<ul style="margin: 0; padding-left: 1.25rem;">
-			<li>🚀 Significantly improved Hybrid Mode stability</li>
-			<li>✨ Introduced several new DX enhancement features</li>
-			<li>🌍 Expanded support for additional localizations</li>
-			<li>🎨 UI tweaks: removed all Vue-related status bar items</li>
-			<li>🐛 Squashed numerous bugs throughout the extension</li>
-		</ul>
-		<div
-			style="margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
-			<a href="https://github.com/vuejs/language-tools/releases/tag/v3.0.0" target="_blank"
-				style="display: inline-flex; align-items: center; gap: 0.5rem; color: var(--vscode-textLink-foreground);">
-				<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
-					<path
-						d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" />
-				</svg>
-				Full Release Notes
-			</a>
-			<div style="display: flex; gap: 0.5rem; font-size: 0.9em; color: var(--vscode-descriptionForeground);">
-				<span>Released: July 2025</span>
-				<span>•</span>
-				<span>v3.0.0</span>
-			</div>
-		</div>
+	<div style="position: relative; width: 100%; padding-bottom: 52%; height: 0; overflow: hidden;">
+		<iframe id="blog" src="https://vue-language-tools.pages.dev/v3-2/" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"></iframe>
 	</div>
+	<script>
+		const iframe = document.getElementById('blog');
+		window.addEventListener('message', event => {
+			if (event.data.url) {
+				vscode.postMessage({ command: 'openUrl', url: event.data.url });
+			}
+		});
+	</script>
 
-	<h2>🎥 Learn More Features</h2>
+	<h2>Learn More Features</h2>
 	<p>Discover advanced capabilities of the extension:</p>
 	<div class="video-container">
 		<a href="https://www.youtube.com/watch?v=RcPcO4_Ct_U" target="_blank">
@@ -482,26 +364,7 @@ function getWelcomeHtml(context: vscode.ExtensionContext) {
 		}
 	</script>
 
-	<h2>✨ Core Features</h2>
-	<div class="features">
-		<div class="feature">
-			<div class="feature-icon">🧩</div>
-			<h3>Template Intelligence</h3>
-			<p>Smart completions for directives, components and props in Vue templates with type inference</p>
-		</div>
-		<div class="feature">
-			<div class="feature-icon">🔍</div>
-			<h3>Type Checking</h3>
-			<p>Full TypeScript support with type inference across SFCs and reactive type checking</p>
-		</div>
-		<div class="feature">
-			<div class="feature-icon">🎨</div>
-			<h3>Syntax Highlighting</h3>
-			<p>Comprehensive syntax highlighting for Single File Components and template expressions</p>
-		</div>
-	</div>
-
-	<h2>📚 Resources</h2>
+	<h2>Resources</h2>
 	<ul>
 		<li><a href="https://vuejs.org/guide/typescript/overview.html" target="_blank">Vue with TypeScript Guide</a> -
 			Official documentation</li>
@@ -511,7 +374,7 @@ function getWelcomeHtml(context: vscode.ExtensionContext) {
 			and get help</li>
 	</ul>
 
-	<h2>🔧 Troubleshooting</h2>
+	<h2>Troubleshooting</h2>
 	<details>
 		<summary>Why are some features not working?</summary>
 		<div>
@@ -537,7 +400,7 @@ function getWelcomeHtml(context: vscode.ExtensionContext) {
 		</div>
 	</details>
 
-	<h2>❤️ Thanks to Our Sponsors</h2>
+	<h2>Our Sponsors ❤️</h2>
 	<div class="card sponsors-card" style="text-align: center; padding: 1.5rem;">
 		<p style="margin-top: 0;">This project is made possible thanks to our generous sponsors:</p>
 		<div id="sponsors-container" style="max-width: 100%; margin: 0 auto;"></div>

lerna.json

@@ -5,5 +5,5 @@
 		"extensions/**",
 		"packages/**"
 	],
-	"version": "3.1.8"
+	"version": "3.2.0"
 }

packages/component-meta/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-component-meta",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",

packages/component-type-helpers/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vue-component-type-helpers",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",

packages/language-core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-core",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",

packages/language-plugin-pug/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-plugin-pug",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",

packages/language-server/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vue/language-server",
-	"version": "3.1.8",
+	"version": "3.2.0",
 	"license": "MIT",
 	"files": [
 		"**/*.js",