⚡ Fast Vue Language Support Extension

https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar

Volar is a Language Support plugin built specifically for Vue 3. It's based on @vue/reactivity to calculate TypeScript on-demand to optimization performance close to native TypeScript language service.

🛠️ This project is still refactoring to make it easier for contribute.

[Roadmap] [Tips] [Discord]

Volar does not include ESLint and Prettier, but ESLint and Prettier official extension supported Vue, you could install these yourself if you need.

If you need Type-Checking on command line, use vue-tsc.

If you like this extension, please consider to becoming a Sponsor. Thank you.

• vite/create-app
• Vitesse

// components.d.ts
declare module 'vue' {
	export interface GlobalComponents {
		RouterLink: typeof import('vue-router')['RouterLink']
		RouterView: typeof import('vue-router')['RouterView']
	}
}

export { }

// components.d.ts
import { RouterLink, RouterView, useLink, RouteLocationNormalized } from 'vue-router'
import { UnwrapRef, VNode } from 'vue'

declare module 'vue' {
	export interface GlobalComponents {
		RouterLink: typeof RouterLink & {
			__VLS_slots: {
				default: UnwrapRef<ReturnType<typeof useLink>>
			}
		}
		RouterView: typeof RouterView & {
			__VLS_slots: {
				default: {
					Component: VNode
					route: RouteLocationNormalized & { href: string }
				}
			}
		}
	}
}

export { }

{
  "devDependencies": {
    "@vue/runtime-dom": "latest"
  }
}

You need to disable Vetur to avoid conflicts.

Recommended use css / less / scss as <style> language, because these base on vscode-css-languageservice to provide reliable language support.

If use postcss / stylus / sass, you need to install additional extension for syntax highlighting. I tried these and it works, you can also choose others.

• postcss: language-postcss.
• stylus: language-stylus
• sass: Sass

tsconfig.json / jsconfig.json is required.

Also required "strict": true and "moduleResolution": "node".

__VLS_slots will change in future, see: #40