⚡ High-performance Vue language tooling based-on Volar.js

💬 #language-tools on our Discord Server

• Vue Language Features
  Vue, Vitepress, petite-vue language support extension for VSCode
• vue-tsc
  Type-check and dts build command line tool
• vue-component-meta
  Component props, events, slots types information extract tool
• vite-plugin-vue-component-preview
  Vite plugin for support Vue component preview view with Vue Language Features
• @vue/language-server
  The language server itself.
• @vue/typescript-plugin
  Typescript plugin for the language server.

yaegassy/coc-volar ⚡ 🤝 🅿️
Vue language client for coc.nvim

neovim/nvim-lspconfig ⚡ 🤝
Vue language server configuration for Neovim

-- If you are using mason.nvim, you can get the ts_plugin_path like this
-- local mason_registry = require('mason-registry')
-- local vue_language_server_path = mason_registry.get_package('vue-language-server'):get_install_path() .. '/node_modules/@vue/language-server'

local vue_language_server_path = '/path/to/@vue/language-server'

local lspconfig = require('lspconfig')

lspconfig.ts_ls.setup {
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        location = vue_language_server_path,
        languages = { 'vue' },
      },
    },
  },
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
}

-- No need to set `hybridMode` to `true` as it's the default value
lspconfig.volar.setup {}

local lspconfig = require('lspconfig')

-- lspconfig.ts_ls.setup {} 
lspconfig.volar.setup {
  filetypes = { 'typescript', 'javascript', 'javascriptreact', 'typescriptreact', 'vue' },
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
}

local lspconfig = require('lspconfig')

lspconfig.ts_ls.setup {
  init_options = {
    plugins = {
      {
        name = '@vue/typescript-plugin',
        location = '/path/to/@vue/language-server',
        languages = { 'vue' },
      },
    },
  },
}

lspconfig.volar.setup {
  init_options = {
    vue = {
      hybridMode = false,
    },
  },
}

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

* ⚡ support multiple servers
* 🤝 support take over mode
* 🅿️ support extra preview features

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
pnpm 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 workspace with https://github.com/volarjs/workspace.

Special Sponsor
Next Generation Tooling
Platinum Sponsors
An approachable, performant and versatile framework for building web user interfaces.			Astro powers the world's fastest websites, client-side web apps, dynamic API endpoints, and everything in-between.
Essential tools for software developers and teams.			Stay in the flow with instant dev experiences. No more hours stashing/pulling/installing locally — just click, and start coding.
Silver Sponsors

Become a sponsor