2

Not using a pre-existing boilerplate like electron-vue, I'd like to set up a Electron app with Vue.js. What is the procedure to do so, specifically for a beginner?

So far,I have installed vue cli globally with NPM, created my project with vue create, then installed electron into it with npm install electron.

From here is where everything falls apart. The article I was following specifies starting the app with dev, which runs: "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js". For whatever reason, this doesn't work. Comments on the article seem to suggest these commands are linux formatted, but no one has provided a windows formatted equivalent.

electron . starts the app, as expected, but vue components just dont work. Adding a basic <script src="> tag to the vue CDN at the top of the index.html works, and causes it to work, but ideally I'd like the electron app to work offline, which I believe was the point of using vue-cli as opposed to just importing it from the CDN.

Is there a simple way to do this? or would I be better off just downloading vue manually, throwing it into a folder in the electron app, and loading it with a script tag?

RNPF
  • 231
  • 3
  • 23
  • Not 100% sure what the Vue development server is, but looking closer I'm pretty sure its what I'm missing. Starting it manually with `npm serve` starts... something, but does not appear to make vue available to my electron page either. – RNPF Mar 01 '19 at 20:10
  • "ideally I'd like the electron app to work offline, which I believe was the point of using vue-cli." I think you've misunderstood what vue-cli is; it's nothing to do with helping your app work offline, it just sets up webpack and all the other tooling for your development work. electron-vue is one of several boilerplate setups that vue-cli can install for you (given your experience level I would *strongly* recommend using it instead of trying to set things up on your own.) – Daniel Beck Mar 01 '19 at 21:10
  • Clarified what I meant by that statement. I meant "Using Vue-CLI as opposed to importing from the CDN". – RNPF Mar 01 '19 at 21:14
  • Ah, I see! my mistake, sorry. – Daniel Beck Mar 02 '19 at 01:24

2 Answers2

2

The easiest way to create an Electron app with vue.js as the frontend framework:

  1. install vue-cli 3：

npm install -g @vue/cli

  1. create a project (be patient because it may take a while):

vue create myproject

cd myproject

  1. add and invoke the generator of vue-cli-plugin-electron-builder (it will automatically set up electron for you and let you check changed files):

vue add electron-builder

  1. test your app:

npm run electron:serve

or build your app:

npm run electron:build

See more in this guide: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server

K. Symbol
  • 3,330
  • 1
  • 21
  • 22
  • Perhaps I misunderstand your answer, but isn’t the point of the question of how to setup `Vue.js` with `Electron` without a boilerplate? – Mihai Dec 28 '21 at 21:26
1

This works in Windows Powershell if all PATH variables to vue-cli-sevice and electron are correct:

set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js

Note that the new version of vue changed some commands:

https://cli.vuejs.org/guide/installation.html

Windows command help:

Setting and getting Windows environment variables from the command prompt?

How do I run two commands in one line in Windows CMD?

What solved the issue in the end was changing relative paths to absolute.

Also this was useful: https://nklayman.github.io/vue-cli-plugin-electron-builder/

rafaelcastrocouto
  • 11,781
  • 3
  • 38
  • 63
  • It appears `&&` doesnt work at all in windows powershell, resulting in `The token '&&' is not a valid statement separator in this version.`, however, after replacing the `&&` with `;` as suggested [here](https://www.reddit.com/r/PowerShell/comments/4egx8v/not_working/), it boils down to a `the term 'vue-cli-service' is not recognized` error. Replacing it with npm run serve just causes the dev server to launch, and nothing after npm serve ever runs. – RNPF Mar 01 '19 at 22:42
  • Does the updated version works? I also had that 'vue-cli-service' is not recognized error. That's why I linked the new vue installation website. – rafaelcastrocouto Mar 02 '19 at 01:12
  • I'm now able to get a development server running consistently, but it doesn't start electron. it just takes up the whole prompt with https://pastebin.com/j0WNscHb. Meanwhile, NPM start still starts electron successfully. Nothing has yet gotten BOTH electron and vue started at the same time, however. – RNPF Mar 02 '19 at 02:30
  • Okay, now I'm able to get rid of that error entirely, and even see my site on localhost when I have the dev server up and running. Still absolutely nothing in electron itself, however. – RNPF Mar 02 '19 at 02:38
  • Have you tried to use one prompt window for each one of them? Does it work? – rafaelcastrocouto Mar 02 '19 at 21:04
  • 1
    One prompt window each didnt work, until I changed the relative paths to absolute. Then it worked fine, so this is solved. Although, ultimately, as pointed out elsewhere this process is too finicky to be practical. While I didnt end up using a boilerplate, I ended up using electron-builder. https://nklayman.github.io/vue-cli-plugin-electron-builder/ – RNPF Mar 04 '19 at 00:02