Vetur: Completion for Vue interpolations in HTML

[octref]

This tracks completion for template interpolations inside Vue template interpolations.

Problem:

Currently there is no completion for the 4 places marked with |

<template>
  <div v-if="|" @click="|" :foo"|">{{ | }}</div>
</template>

The goal is to provide completions for [ props | data | method | computed], and also $store / $router etc.

The plan is to create a virtual file that TypeScript Language Service can understand and get the current this completion and filter it down to useful items:

[octref]

Here you go.

[hmexx]

Wow.. that looks amazing!!! Is there a flag to enable it though? I can't seem to get any completion after upgrading vetur on my end. Or is it a vue-class-component compatibiity thing. Hmm....

@octref

[octref]

@hmexx Can you put your setup in a repo and open a new issue? I probably need to do more work to support vue-class-component.

[victorgarciaesgi]

@octref Yeah that was my question. I suppose it does not work when using class component style?
Amazing work by the way!

[hmexx]

I can confirm that when I switch one of my components to non-class style it starts working, although that little type/preview box on the right (e.g. "My foo that does absolutely nothing") does not show up. All the props and methods show up though.

I will investigate further before submitting an issue ticket.

EDIT: Well, I'm an idiot, I just discovered the "double control-space" to view additinal info in VScode. After using vscode for 2 years. So it works fully with a non-class stye component!

Do you still need a reproduction repo for testing vue-class-component? Any hello world example from the web should do.

Thanks again for the great work!!!

[zakkor]

That looks amazing. This is a naive question, but would this apply to any template lang supported by Vetur (for example Pug), or just HTML?

[jackkoppa]

Absolutely fantastic. Thank you, @octref, this is huge for us 😀

[octref]

Do you still need a reproduction repo for testing vue-class-component?

@hmexx It's ok — I opened #1105. I know it wouldn't work.

@zakkor Just HTML for now. There is no language server for Pug, so completion does not work in it.

[guillenotfound]

It doesn't work if we use module.exports, check: https://github.com/vuejs/vetur/issues/1059