How to expose Vue.js Project APIs from a VSCode Extension Accessible to Theia

[Ashishh0007]

How can we expose APIs from a Vue.js project, located within a VSCode extension, accessible to Theia?

[msujew]

Hey @Ashishh0007,

to facilitate communication between the Theia frontend (which is what I assume you're talking about) and a VS Code extension, it's usually easiest to use the vscode.commands.executeCommand API. Since commands can return values (and are awaitable), you can effectively build an RPC system on top of the command API. This communication is bidirectional, as the frontend and the VS Code extension can independently register and call commands that the other one can access.

In addition to that, since you have a Vue.js based webview (right?), you will need to additionally establish communication between the webview and your extension via the acquireVsCodeApi function. I know this is a lot of roundtrips for webview <-> Theia communication, but if you insist on using webviews, this is the way to go. Usually I would recommend to encapsulate your widget as a Theia widget.

[Ashishh0007]

Thank you @msujew for this information. Can you please share some examples or any documentation to refer regarding these steps that you have provided?
That would be really helpful.

[msujew]

I'm not aware of any examples or documentation or examples, given that this is a rather exotic use case. Essentially, all you need to do is:

VS Code:

// To register a command that can be called from Theia
vscode.commands.registerCommand('callable-from-theia', (...args) => { ... });
// To call a command registered in Theia
const result = await vscode.commands.executeCommand('callable-from-vscode', ...args);

Theia:

@inject(CommandRegistry) private readonly commandRegistry: CommandRegistry;
// To register a command that can be called from VS Code
this.commandRegistry.registerCommand({ id: 'callable-from-vscode' }, {
  execute: (...args) => { ... }
});
// To call a command registered in VS Code
const result = await this.commandRegistry.executeCommand('callable-from-theia', ...args);

[Ashishh0007]

Thank you so much for your help. It has been incredibly useful.

However, I am now encountering another major issue. I have integrated a Vue.js project into the extension, placing it parallel to the extension's src folder.

The primary challenge I am facing is establishing communication between the Vue.js project and the extension.js file located within the src directory.

Please provide some suggestions on how to achieve this. Your assistance would be greatly appreciated.

[msujew]

Unfortunately, I'm very much unfamiliar with how Vue.js projects work. I can only refer you to the vscode webview API since this is more related to VSCode than Theia. You can try asking them yourself on their github repo.