Add a Vue example

[kaisalmen]

Should we add a Vue client to the examples?

It should only be integrated into this repository if it does not bring a ton of dependencies (like Angular) and fits the overall dev approach with vite. But with VueI am positive it will work. Otherwise, it could live in an external repo.

[RSS1102]

I think we can pay attention to language-tools(volar). I am also trying to add a Vue3 language on Monaco. I think this is helpful.

[kaisalmen]

Hi @RSS1102 can you be more specific?

[RSS1102]

Hi @RSS1102 can you be more specific?

This is my personal understanding： Each language has its own pattern, and Vue is no exception. In order to increase portability, such as compatibility with Vue systems such as vscode/vitepress, a separate warehouse has been developed for Vue.

1. this is vue-language-configuration.json,Here are the key strings for the Vue language.
2. @volar/monaco, is used to bridge the language capabilities implemented based on Volar.js to Monaco Editor.

https://github.com/Kingwl/monaco-volar , There is an example code here, but I don't think it is perfect, there are too many dependencies, and many features are outdated. I personally think that all you need is the vue-language-configuration.json file,and the rest needs to be done by ourself. I personally believe that these functions mainly support:

1. Vue language support.
2. Language highlighting
3. Vue worker.

---

But I don't have enough understanding to implement it yet. But I am still working hard.

[kaisalmen]

My understanding is that volar helps to ease building languageservers / languageclient. What we gain with @codingame/monaco-vscode-api is there is no more monaco-editor related fiddling needed as it behaves like it is running inside vscode. So monaco-volar is not needed as you can just use your languageclient implementation. @CGNonofr anything to correct or add here?

[RSS1102]

Yes, so maybe it's just a need for vue-language-configuration.json,i think.

[kaisalmen]

Yes that and a textmate grammar. That is what we load for the Langium Statemachine DSL as well: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/src/langium/statemachineClient.ts#L77-L78 (The references are used in the extension configuration (a few lines above).

It is basically done for every default language extension you can import.

[RSS1102]

Okay, thank you. I'll give it a try this weekend.