Vue DX

Zero-config DX for Vue 3 + Vite projects: named router-view autocomplete, IntelliSense for global components and directives, auto-generated jsconfig.
No config files to commit, no per-project setup.

Why

In a Vue project, some "magic strings" get no editor support at all:

• the keys of components: {} in route records must match the <router-view name="..."> in your layouts, but the link only exists at runtime — VSCode suggests everything except the right names;
• components registered with app.component(...) and directives registered with app.directive(...) are invisible to Volar without a .d.ts augmenting GlobalComponents/GlobalDirectives;
• aliases defined in vite.config don't apply to IntelliSense until they're replicated in jsconfig.json.

The classic solutions (codegen scripts, JSDoc annotations, config files) have to be maintained per project and clutter your repos. Vue DX moves all of this into the editor: install it once and it works on any Vue + Vite workspace, present or future.

What it does

🧭 Named router-views in route records

The <router-view name="..."> of all your layouts are indexed (any .vue file under src/, no required structure). Inside a route record's components: {} you get:

• Autocomplete for view names, prioritized above generic suggestions;
• Go to definition from the key to the matching <router-view> in the layout;
• Diagnostics: warnings on keys that don't exist in any layout (the typos no type-check would ever catch).

An object is treated as a route record if it has path among the sibling keys of components, or if the file lives in a router/routes folder — Options API components: {} objects are left alone. The detection is textual and tolerant, so it works even while the code is syntactically incomplete (i.e. while you're typing).

⚙️ Automatic codegen

On workspace open and on every save of the relevant files, the extension regenerates:

The details that matter:

• Git remains predictable: New generated files are added to '.git/info/exclude' with path relative to the repository root. Traced files remain visible: the migration removes 'skip-worktree' only from outputs recognized as managed, and updates or deletions appear normally in Git.
• Smart Watchers: Edit a file that records components/directives → '.d.ts' update themselves, with debounce. New files that introduce recordings are also automatically docked.
• Writings only if needed: If the generated content is identical, the file is not touched — no unnecessary tsserver/Volar restarts.
• Reliable Aliases: The 'vite.config' is loaded via Vite into a separate Node process; if the load fails (missing dependencies, exotic configs), a static fallback parser is triggered.
• Import default and named supported; related imports are resolved against the file it logs.
• Hand-added lines in 'directives.d.ts' (e.g. third-party library directives) are preserved.
• An existing 'jsconfig.json' not generated by Vue DX is not modified. Files created by Vue DX use an ownership JSONC comment, are updated, and are removed when no longer needed.
• Nested Vue + Lives packages are automatically discovered in monorepos; indexes, watchers, and outputs remain isolated per package.

Getting started

Install the extension and open a Vue + Vite project — that's it. Vue DX activates on its own in workspaces that have a vite.config.* and vue among the dependencies.

It requires a trusted workspace (it runs the project's vite.config and writes the generated files).

Commands

Settings

Known limits

• Named view suggestions are the merge of all project layouts: figuring out which layout a specific route needs would require statically resolving the route tree (possible evolution).
• Dynamically constructed recordings (cycles, computed names) are not statically detectable.
• Dynamic ''s are ignored; those without 'name' count as 'default'.
• To migrate from 0.1.x, a 'jsconfig.json' is recognized as generated only if it exactly matches the structure produced by that version; custom configurations always remain intact.
• During migration, 'skip-worktree' is removed from the three historical paths ('jsconfig.json', 'components.d.ts', 'directives.d.ts') without changing their contents: any local differences are simply visible again in Git.
• If an automatic directive had already been removed from the code before 0.2 was first started, it is not possible to distinguish it with certainty from a manual line in the old 'directives.d.ts': it is preserved to be safe. After the first regeneration, metadata 0.2 makes subsequent cleanings accurate.

Licenza

MIT — © 2026 Able S.r.l.