Vue Language Tools

The Vue Language Tools repository is organized into several packages depending on your use case:

For End Users

• Vue (Official): VSCode extension for Vue, Vitepress, and petite-vue support.
• vue-tsc: CLI tool for type-checking and dts builds.

For Editor Integration

• @vue/language-server: The core language server.
• @vue/language-service: A collection of language service plugins.
• @vue/typescript-plugin: A plugin for the TypeScript language service.

Core & Helpers

• @vue/language-core: Handles SFC parsing and virtual code generation.
• vue-component-meta: Extracts type information for component props, events, and slots.
• vue-component-type-helpers: Utilities for component types.
• @vue/language-plugin-pug: Support for Pug templates.

To get full Vue language support in Visual Studio Code, install the Vue (Official) extension (formerly known as Volar).

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

For IDEs other than VSCode, the petiteVue and vitePress server init options have been removed. Instead, use the additionalExtensions option to include html and md support.

additionalExtensions: ['html', 'md']

Install vue-component-meta along with typescript to enable static metadata extraction for Vue components.

npm install vue-component-meta typescript

Install the Pug template language plugin for Vue Language Tools as a development dependency using npm.

npm install @vue/language-plugin-pug --save-dev

The language server can be integrated into various editors via the Language Server Protocol (LSP):

• VSCode: Install the Vue (Official) extension.
• Neovim: Use nvim-lspconfig.
• Sublime Text: Use sublimelsp/LSP-volar.
• Emacs: Use lsp-mode.

To perform type-checking and build .d.ts files from the command line, install vue-tsc and typescript as development dependencies. You can then add a script to your package.json to run the type-check without emitting files.

npm install vue-tsc typescript --save-dev

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