I've figured that since Vue CLI has a ton of node_modules I can make a Vue component capable of executing a shell command (ls -l, for example).
I have added Electron via vue add electron-builder.
I have VueRouter in mode: process.env.IS_ELECTRON ? 'hash' : 'history',.
I am running the project with npm run electron:serve.
This is the ShellExec.vue component:
<template>
<div id="wrapper">
<div class="input_row">
<input type="text" class="input_text" id="shell" v-model="shell_command" />
<label class="label_" for="shell">Type Shell Command</label>
</div>
<button type="button" class="button" @click="shellExec">Submit !</button>
</div>
</template>
<script>
import { exec } from "child_process";
export default {
name: "ShellExec",
components: {},
data() {
return {
shell_command: ""
};
},
methods: {
async shell() {
return new Promise((resolve, reject) => {
exec(this.shell_command, (err, stdout, stderr) => {
if (err) {
reject(err);
} else {
resolve({ stdout, stderr });
}
});
});
},
async shellExec() {
let { stdout } = await this.shell();
for (let line of stdout.split("\n")) {
console.log(`ls: ${line}`);
}
}
}
};
</script>
<style scoped>
</style>
The JS scripts come from here: https://stackoverflow.com/a/31897900/13268871
shell_command takes what ever value I type in the input, so that appears to work properly.
I am trying a simple ls -l command, but when I press on the Submit ! button, I receive the following errors:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler (Promise/async): "TypeError: Object(...) is not a function"
found in
---> <ShellExec> at src/components/ShellExec.vue
<App> at src/App.vue
<Root>
vue.runtime.esm.js?2b0e:1888 TypeError: Object(...) is not a function
at eval (ShellExec.vue?face:25)
at new Promise (<anonymous>)
at _callee$ (ShellExec.vue?face:23)
at tryCatch (runtime.js?96cf:45)
at Generator.invoke [as _invoke] (runtime.js?96cf:274)
at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
