Synopsis

A lot of work lies ahead to get Vetur to 1.0. This roadmap exists to:

• Give a big picture as to what's left.
• Inform the complexity of the remaining issues.
• Inform the prioritization of features/bug-fixes.
• Guide you to the correct issues to follow up.

This issue is a live document updated frequently.
This issue supersedes #188.

Signage

• 🌟 Current focus.
• 🏃‍♂️ In progress.
• 🚨 Upstream issue or support needed.
• ☑️: Features implemented.

Discussion in This Issue

Please make the discussion stay high-level.

Good Discussion: 👍

• I think this feature area is missing, and it's important because...
• If you have xxx, it would make it much easier for people to contribute...

Bad Discussion: 👎

• When can you support pug formatting? (Complain in individual issues).
• How do I configure Vetur to do xxx? (Open new issues for questions).

Features

Here is how Vetur looks like from each feature area. In each section, I describe:

• Current state
• What's missing
• Complexity of the features

This section provides a high-level overview and omits smaller bugs.

Vote for areas that you want more support:

🌟 Smart Editing in Template Interpolations

In Vue file's <template> region, you can use interpolations. For example, in this snippet:

<div v-if="this.foo">{{ this.bar }}</div>

both this.foo and this.bar are template interpolations. Currently, Vetur has no smart editing support for them, including:

• 🌟 🏃‍♂️ Diagnostics / Type-Checking. Type checking for template expressions #681 and Type checking for template expressions #209.
• 🌟 Autocompletion
• Hover information
• Jump to definition
• Find References
• Rename Symbol

Full support for interpolations requires a new dedicated Language Service. Some ground-work (#802, #800, #786) was done to make this Language Service testable, maintainable and able to serve as the basis for implementing all language features.

Complexity lies in

• Vue's interpolation could include filter which is not standard JavaScript.
• Properties on this are bound to global scope. For example, instead of <div v-if="this.foo">, you can do <div v-if="foo">.

Multi-root and Sub-folder support

Currently, Vetur provides no multi-root support. Also, if your Vue project is not on the top-level, Vetur will not activate. The current plan is to make Vetur activate on each folder of a multi-root setup, if a folder contains a package.json. Instead of supporting sub-folders such as /client/, we'll advise people to open both / and /client so Vetur could work on the subfolder.

Related issues: #424 #815

JSX Support

We have no support for JSX yet. This should be implemented as a TypeScript plugin, same as lit-html.

Issues:

• 🚨 Syntax Highlighting for JSX. Add template literal (jsx) support #49. Blocked by When A grammar injects to B, grammars embedding B should get A's injection microsoft/vscode#44056.
• Emmet in JSX. Emmet in .vue files using jsx? [enhancement] #693.

TypeScript Plugin Support

TS Plugin allows us to take control of editing experience for JS/TS files. This is required for rename support, so that you can run renaming on a JS file and see all <script> regions in Vue files getting updated.

Vetur would need to setup a TS Plugin and bi-directional communication between Vue-Language-Server and it. There's a lot of uncertainty and complexity involved.

This could also lift the limitation that you need to add .vue suffix when importing Vue files from JS/TS.

Upstream TypeScript features

A lot of new TS smart-editing features have come to VS Code. Some of them benefit Vetur directly, others would need manual integration:

• Auto-import in <script> region. Auto-import component in <script> when using component in template/javascript #684.
• Organize import. Automatic Import Organisation not working #843.
• Refactor support. Refactor support for Vetur #871.
• Update import path when moving file. Feature Request: Update import paths when a file is moved/renamed #820

In addition to bringing these features to Vetur's support for <script> region, we can also think about what more we can do in the context of .vue files. For example, refactor support for <template> that would extract a sub-tree into a new component.

Integration with other tools

Vetur already has integration with emmet | prettier | prettier-eslint | eslint-plugin-vue, and framework integration with many Vue-based frameworks. Issues for those are tracked in integration:<tool> labels.

What's missing are:

• TSLint integration. Linting support for typescript #170.
• Use locally installed dependencies for prettier. Opt to use locally installed version of Prettier if available #523.
• Prettier as template formatter. Prettier as an option for template formatting #950.

Hopefully, we can also reach a spec for describing Vue components (similar to dts files) that would make it easy to:

• Generate definition files from .vue source files.
• Read from those definition files in Vetur for various smart-editing features.

Related: vuejs/vue#7186

Stability / Performance

Vetur has been stable and performant enough for most people to use daily. However, there are a few perf-related issues we need to fix:

• Vetur Intellisense slow and incomplete if project has jsconfig. Vetur Intellisense slow and incomplete if project has jsconfig #547.

Missing Tooling Libraries

Vetur brings in many tooling libraries and try to make them working harmoniously in .vue files, such as vscode-css-languageservice, prettier and language-stylus. However, we don't have the following tooling libraries:

• A good HTML formatter: prettyhtml by @StarpTech ~~~(Prettier is working on it ([WIP] feat: html support prettier/prettier#4753), but I guess it wouldn't directly apply to .vue files, especially for interpolations).~~~ Related: prettier for Vue #491, New html formatter #561.
• Pug Language Service.
• Sass Language Service.
• PostCSS Language Service (mostly covered by vscode-css-languageservice, but newer features in CSS aren't covered).

I wouldn't have time to work on any of these as of now, so features in this areas are blocked.

Contribution

This is a daunting todo list. I would very much love contributions!

There are many ways you could contribute. Two major ways:

• Contribute to building one of the "Missing Tooling Libraries" above. For example, New html formatter #561.
• Contribute to Vetur itself. This would be complicated if you've never done any Language Server development now. I plan to make that easier by:
  • Update contributing guide
  • Write a blog post that explains how Vetur works

If you do want to take major features, please open issue to discuss about it early. Otherwise, you might do a lot of unnecessary work by going to the wrong direction.