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?

Improve this question
4
  • 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. Commented Mar 1, 2019 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.) Commented Mar 1, 2019 at 21:10
  • Clarified what I meant by that statement. I meant "Using Vue-CLI as opposed to importing from the CDN". Commented Mar 1, 2019 at 21:14
  • Ah, I see! my mistake, sorry. Commented Mar 2, 2019 at 1:24

2 Answers 2

Reset to default
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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Perhaps I misunderstand your answer, but isn’t the point of the question of how to setup Vue.js with Electron without a boilerplate?
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/

Improve this answer

6 Comments

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, 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.
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.
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 pastebin.com/j0WNscHb. Meanwhile, NPM start still starts electron successfully. Nothing has yet gotten BOTH electron and vue started at the same time, however.
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.
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. nklayman.github.io/vue-cli-plugin-electron-builder
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.