{"id":15020,"library":"vls","title":"Vue Language Server (VLS)","description":"The `vls` (Vue Language Server) package provides a Language Server Protocol (LSP) implementation specifically for Vue.js projects. Its primary role was to power editor extensions like Vetur in VS Code, offering features such as intelligent code completion, diagnostics, syntax highlighting, and formatting for Vue Single File Components (SFCs). The `vls` npm package itself is currently at version `0.8.5` and has not received significant updates for several years, indicating a stagnant development pace for the standalone package. While Vetur, which historically consumed `vls`, continued to evolve for a time (reaching versions like `0.37.x`), the broader Vue ecosystem, particularly with the advent of Vue 3, has largely transitioned to Volar as the recommended language server due to its more comprehensive and official support for modern Vue 3 features like `<script setup>` and enhanced TypeScript integration. As a result, `vls` is primarily relevant for older Vue 2 projects or as a foundational component for historical language tooling, with limited utility for current Vue 3 development.","status":"deprecated","version":"0.8.5","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vetur","tags":["javascript","typescript"],"install":[{"cmd":"npm install vls","lang":"bash","label":"npm"},{"cmd":"yarn add vls","lang":"bash","label":"yarn"},{"cmd":"pnpm add vls","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"`vls` is primarily consumed as a global CLI command for direct user interaction or spawned by language client extensions, rather than being imported as a module into application code.","wrong":"import { vls } from 'vls'","symbol":"vls (CLI command)","correct":"npm install -g vls\nvls --version"},{"note":"This path points to the server's main executable script. It is typically used programmatically by language client implementations with `child_process.spawn('node', [require.resolve('vls/dist/vueServerMain')])` to launch the language server process.","wrong":"import { vueServerMain } from 'vls/dist/vueServerMain'","symbol":"vueServerMain","correct":"require.resolve('vls/dist/vueServerMain')"},{"note":"For TypeScript users developing custom language client extensions or programmatically interacting with VLS, its type definitions can be imported. This is a type-only import and does not provide runtime values.","wrong":"import { VLS } from 'vls'","symbol":"VLS (type)","correct":"import type { VLS } from 'vls'"}],"quickstart":{"code":"npm install -g vls\n\n# Verify installation and server functionality\nvls --version\n\n# Example of how a language client might launch it (conceptual)\nconst { spawn } = require('child_process');\nconst path = require('path');\n\nconst vlsPath = require.resolve('vls/dist/vueServerMain');\nconsole.log(`Attempting to start VLS from: ${vlsPath}`);\n\nconst serverProcess = spawn('node', [vlsPath], {\n  stdio: ['pipe', 'pipe', 'pipe'] // stdin, stdout, stderr for LSP communication\n});\n\nserverProcess.stdout.on('data', (data) => {\n  console.log(`VLS STDOUT: ${data.toString().trim()}`);\n});\n\nserverProcess.stderr.on('data', (data) => {\n  console.error(`VLS STDERR: ${data.toString().trim()}`);\n});\n\nserverProcess.on('exit', (code) => {\n  console.log(`VLS process exited with code ${code}`);\n});\n\n// In a real client, you'd send LSP messages to serverProcess.stdin\n// and parse responses from serverProcess.stdout.","lang":"javascript","description":"Demonstrates how to install VLS globally via CLI and conceptually how a language client would spawn the `vls` server process for LSP communication."},"warnings":[{"fix":"For full language tooling support in Vue 3 projects, it is strongly recommended to migrate to Volar (e.g., the 'Vue Language Features (Volar)' extension for VS Code).","message":"The `vls` package, and by extension the Vetur VS Code extension it powered, provides only basic and incomplete support for modern Vue 3 features, particularly `<script setup>`, Composition API refinements, and advanced TypeScript integration. Many Vue 3-specific language features will not function correctly or at all.","severity":"breaking","affected_versions":"all"},{"fix":"For all new Vue projects, especially those using Vue 3, it is advised to use Volar. For legacy Vue 2 projects, be aware that VLS/Vetur might not receive further updates or bug fixes.","message":"The `vls` npm package at version `0.8.5` has not been updated for an extended period and is considered deprecated for modern Vue.js development. While the Vetur extension historically used `vls` as its core, Vetur itself now explicitly recommends Volar for Vue 3 projects, indicating a shift in the ecosystem.","severity":"deprecated","affected_versions":">=0.8.5"},{"fix":"Ensure your Node.js environment is version 10 or greater. Update Node.js if necessary using a version manager like `nvm` or `volta`.","message":"The `vls` package explicitly requires Node.js version `10` or higher to run, as specified in its `engines` field. Attempting to run `vls` with older Node.js versions will prevent the language server from starting or cause unexpected errors.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install `vls` globally using `npm install -g vls` or `yarn global add vls`.","cause":"The `vls` executable is not installed globally or is not in the system's PATH.","error":"vls: command not found"},{"fix":"Ensure `vls` is installed as a local dependency (`npm install vls --save` or `yarn add vls`) in the project where the language client is running.","cause":"A language client attempted to resolve the `vueServerMain` entry point but `vls` is not installed as a local dependency or the path is incorrect.","error":"Error: Cannot find module 'vls/dist/vueServerMain'"}],"ecosystem":"npm"}