⚡ The Fastest Vue Language Support Extension
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.
If you need Type-Checking on command line, you can use vue-tsc.
[Marketplace] [Roadmap] [Tips] [Discord]
🛠️ This project is still refactoring to make it easier for contribute.
- volar-starter (base on vite/create-app)
- Vitesse
Components services
By default, Local components, Built-in components, native html elements Type-Checking are active.
For Global components, you need to have __VLS_GlobalComponents
interface definition or component registeres call, for example:
__VLS_GlobalComponents
interface definition:
// shims-volar.d.ts
import { RouterLink, RouterView } from 'vue-router'
declare global {
interface __VLS_GlobalComponents {
RouterLink: typeof RouterLink
RouterView: typeof RouterView
}
}
- component registeres call:
// my-global-components-plugin.ts
import Foo from '@/my-global-components/foo.vue'
import Bar from '@/my-global-components/bar.vue'
export const plugin: Plugin = {
install(app) {
app.component('f-o-o', Foo);
app.component('BAR', Bar);
}
}
/* The following code will be automatically generated */
declare global {
interface __VLS_GlobalComponents {
'f-o-o': typeof Foo
'BAR': typeof Bar
}
}
v-slot services
v-slot Type-Checking will auto service all .vue files under the project, but for third party libraries, you need to define the slot types, for example:
// shims-volar.d.ts
import { RouterLink, RouterView, useLink, RouteLocationNormalized } from 'vue-router'
import { UnwrapRef, VNode } from 'vue'
declare global {
interface __VLS_GlobalComponents {
RouterLink: typeof RouterLink & {
__VLS_slots: {
default: UnwrapRef<ReturnType<typeof useLink>>
}
}
RouterView: typeof RouterView & {
__VLS_slots: {
default: {
Component: VNode
route: RouteLocationNormalized & { href: string }
}
}
}
}
}
Work with Vue 2?
This tool required Vue 3 types from @vue/runtime-dom
module.
Vue 3 in itself includes the package @vue/runtime-dom
. For Vue 2 you will have to install this package yourself:
{
"devDependencies": {
"@vue/runtime-dom": "latest"
}
}
Ignore Checking
<template>
checking...
</template>
<script>
checking...
</script>
<!-- @vue-ignore -->
<style>
not checking!
</style>
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"
.If use Vitepress, you should need
"include": ["src/**/*", "src/.vitepress/**/*"]
.
__VLS_GlobalComponents
and__VLS_slots
will change in future, see: #40
If you like this extension, please consider to becoming a Sponsor. Thank you. :)