Nova Vue

Vue language support for Nova, powered by @vue/language-server v3.

Based on the original Vue for Nova extension by Tommaso Negri.

What You Get

• Syntax highlighting for .vue single-file components.
• Template, script, and style highlighting inside Vue files.
• Pug template highlighting.
• Less, Sass, SCSS, PostCSS, and Stylus style highlighting through parser fallbacks.
• Nova color picker support for CSS colors inside Vue <style> blocks.
• Document symbols, folds, tag matching, and text checking.
• Vue completions through Vue Language Server.
• Vue and TypeScript diagnostics in .vue files.
• TypeScript-powered hover, Jump to Definition, Jump to Implementation, Jump to References, rename, and code actions.
• Nuxt Jump to Definition resolves generated component declarations to their source .vue files.
• Quick commands for missing imports, unused imports, organize imports, extracting template markup into a new component, server status, and debug info.

Supported Vue Blocks

• <template> with normal Vue template syntax.
• <template lang="pug"> with bundled Pug highlighting.
• <script> with JavaScript highlighting.
• <script lang="ts"> and <script setup lang="ts"> with TypeScript language-server support.
• <style> and <style lang="css"> with CSS highlighting.
• <style lang="less"> with CSS parser fallback highlighting.
• <style lang="sass"> with bundled Stylus tokenizer fallback highlighting.
• <style lang="scss"> with CSS parser fallback highlighting.
• <style lang="postcss"> and <style lang="pcss"> with CSS fallback highlighting.
• <style lang="stylus"> and <style lang="styl"> with bundled Stylus highlighting.

How It Starts

The extension activates for Vue workspaces, but the language server starts lazily. It waits until you open or switch to a .vue editor, so normal Nova windows are not slowed down by unused Vue processes.

Each Nova workspace owns its own Vue language-server process. This keeps diagnostics and toolchain resolution scoped to the project you are editing.

Toolchain

The extension does not install packages at runtime.

It resolves Vue and TypeScript tooling in this order:

1. Paths set in Nova extension settings.
2. Workspace dependencies from node_modules.
3. Bundled fallback dependencies included with the extension.

Global Vue Language Server and global TypeScript installs are not used automatically. This keeps behavior predictable across projects.

Commands

Available from Nova's command palette and editor menu:

• Vue: Restart Language Server
• Vue: Show Server Status
• Vue: Probe LSP at Cursor
• Vue: Quick Fix
• Vue: Add Missing Imports
• Vue: Remove Unused Imports
• Vue: Organize Imports
• Vue: Extract Into New Component
• Vue: Re-detect Toolchain
• Vue: Open Extension Settings

Nova's native Editor > Show Code Actions and lightbulb UI are the preferred way to apply LSP fixes. The Vue commands are available as direct shortcuts when you want a specific action.

Settings

The extension includes settings for:

• Project discovery and config-file watching.
• Node, Vue Language Server, and TypeScript SDK paths.
• Language-server memory limit.
• Vue completions, diagnostics, and fallback behavior.
• TypeScript-backed navigation, rename, diagnostics, and code actions.
• Debug logging and raw initialization options.

Diagnostics can run when a .vue file is opened, changed, or saved. Those triggers are enabled by default and can be changed globally or per workspace when a project needs quieter diagnostics.

Global debug and LSP log settings intentionally stay global-only. Project settings can inherit global booleans or override them with enabled/disabled tri-state controls.

Custom HTML And CSS Data

Custom HTML and CSS data lets Vue Language Server offer completions and hover information for project-specific tags, attributes, CSS properties, pseudo-classes, and pseudo-elements inside .vue files.

Use the standard custom-data formats documented by the VS Code language services:

• HTML custom data format
• CSS custom data format

Add the paths in Nova project settings:

.nova/Configuration.json

{
  "html.customData": ["./custom-html-data.json"],
  "css.customData": ["./custom-css-data.json"]
}

Paths are resolved relative to the project root. When a configured custom-data file changes, the extension restarts Vue Language Server so it reloads the data.

Troubleshooting

Use Vue: Show Server Status to check or report what the extension detected for the active workspace, including the active Vue file, workspace root, resolved toolchain paths, and relevant settings without requiring full LSP traffic logs.

Enable Debug Logs in settings for regular extension diagnostics

Enable LSP Logs only while debugging protocol-level behavior; LSP logs can be noisy!

Credits

Based on the original Vue for Nova extension by Tommaso Negri.

Changelog

See CHANGELOG.md for release notes.

Changelog

0.1.4

• Removed clipboard permissions by dropping the debug-info and LSP-capabilities copy commands.

0.1.3

• Added Nova color picker support for CSS colors inside Vue <style> blocks.
• Supported hex, RGB/RGBA, HSL/HSLA, percentage RGB, modern space/slash syntax, and HSL hue units.
• Added TypeScript-backed textDocument/implementation support so Nova can enable native Jump to Implementations for .vue files.
• Redirected Nuxt generated component definitions from .nuxt/**/components.d.ts entries to their real .vue component files.
• Added Vue: Extract Into New Component.
• Changed Vue: Add Missing Imports to use TypeScript's combined fixMissingImport code fix, avoiding duplicate imports from multiple quick-fix candidates.
• Improved .vue diagnostics debounce during continuous editing.
• Reorganized TypeScript sources into domain modules with clean aliased builds.

0.1.2

• Added top-level Nova project support for html.customData and css.customData.
• Supported the standard custom-data array format used by the HTML and CSS language services.
• Restarted the Vue Language Server when configured custom-data files change.
• Added Vue server status details for Nova, macOS, TypeScript, and Vue Language Server versions.
• Added ESLint and TypeScript linting to the release check.

0.1.1

• Fixed .vue diagnostics so Vue and TypeScript results are merged instead of one source clearing the other.
• Added Vue diagnostics pull support through Volar workspace diagnostics.
• Added settings for running diagnostics on file open, change, and save.
• Added workspace overrides for diagnostics triggers.
• Added smoke test coverage for Vue parse diagnostics.

0.1.0

• Initial Nova Vue extension release.
• Tree-sitter Vue syntax with template, script, style, Pug, Stylus, and stylesheet fallback injections.
• TypeScript source layout with CommonJS runtime output.
• Toolchain discovery for custom, workspace, and bundled server/TypeScript SDK.
• Lazy Vue Language Server v3 startup through a local LSP proxy.
• TypeScript-backed hover, definition, references, rename, diagnostics, and code actions in .vue files.
• Nova commands for restart, status, debug info, LSP capability probing, quick fixes, import actions, settings, and toolchain re-detection.

MIT License

Copyright (c) Tommaso Negri and contributors
Copyright (c) 2026 vp1100

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.