Vue Language Tools

⚡ Vue language toolset with native TypeScript performance based-on Volar.js

💬 #language-tools on our Discord Server

Quick Start

For VSCode Users

Install the Vue (Official) extension to get full Vue language support.

Command-Line Type Checking

npm install vue-tsc typescript --save-dev

{
  "scripts": {
    "type-check": "vue-tsc --noEmit"
  }
}

Packages

For End Users

Package	Description
Vue (Official)	Vue, Vitepress, petite-vue language support extension for VSCode
vue-tsc	Type-check and dts build command line tool

For Editor Integration

Package	Description
@vue/language-server	The language server itself
@vue/language-service	Language service plugin collection
@vue/typescript-plugin	TypeScript language service plugin

Core Module

Package	Description
@vue/language-core	SFC parsing and virtual code generation

Helper Tools

Package	Description
vue-component-meta	Component props, events, slots types information extract tool
vue-component-type-helpers	Component type helper utilities
@vue/language-plugin-pug	Pug template support

Community Integration

yaegassy/coc-volar
Vue language client for coc.nvim

neovim/nvim-lspconfig
Vue language server configuration for Neovim, check documentation here to set it up.

mattn/vim-lsp-settings
Vue language server auto configuration for vim-lsp

sublimelsp/LSP-volar
Vue language client for Sublime

kabiaa/atom-ide-volar
Vue language client for Atom

emacs-lsp/lsp-mode (jadestrong/lsp-volar)
Vue language client for Emacs

tommasongr/nova-vue
Vue language client for Nova

xiaoxin-sky/lapce-vue
Vue language client for Lapce

Kingwl/monaco-volar
Vue language support for Monaco on Browser

WebStorm
Built-in integration for @vue/language-server

Eclipse WildWebDeveloper
Vue language server configuration for Eclipse

vueCompilerOptions

Configure Vue compiler options in tsconfig.json:

{
  "compilerOptions": { /* ... */ },
  "vueCompilerOptions": {
    "target": 3.5,
    "strictTemplates": true
  }
}

For detailed options, please refer to the @vue/language-core documentation.

Contribution Guide

If you want to work on the volar extension follow these commands to set up your local development environment.

🔎 Note that you will need pnpm - you can download it here: https://pnpm.io/installation.

git clone https://github.com/vuejs/language-tools.git
cd language-tools
pnpm install
npm run build

The recommended way to develop the volar extension is to use the Debug Tools provided by VSCode.

Alternatively, you can run one of the scripts defined in the package.json file.

❗ You should always use the debug launch configs or package.json scripts defined in the root of the project.

Additional info for contributing to open source projects can be found here: https://docs.github.com/en/get-started/quickstart/contributing-to-projects

To develop with upstream Volar.js modules, you can setup a workspace with https://github.com/volarjs/workspace.

❤️ Sponsors

This project is made possible thanks to our generous sponsors:

License

MIT License