Electron with webpack and Vue.js



Setup an Electron desktop app with webpack and Vue.js.

electron-webpack: https://github.com/electron-userland/electron-webpack

Code examples from this video: https://github.com/shama/letswritecode/tree/master/electron-webpack-vuejs

Related Posts
Building a universal/isomorphic web app with React.js

Learn how to make our server-side rendered app universal/isomorphic with React.js. We'll be using webpack@1 to build a client-side bundle Read more

Let's Build: With Ruby on Rails – Multitenancy Workout App – Configure VueJS and Views – Part 5

Hi, My name is Andy Leverenz and I work as a Product Designer at Dribbble. For fun I design, code, Read more

Pika Web: a new way to build Web Applications

With PikaWeb we prebundle our NPM packages and then use them as simple .js files in our application. This is Read more

37 thoughts on “Electron with webpack and Vue.js”

  1. When running on OSX pre High Sierra (10.12.x for example), you might get a code signing error from electron-builder. To turn it off, use "build": "electron-webpack && electron-builder -c.mac.identity=null" in package.json.

    Reply
  2. If you cannot get Kyle's alert example to work, you need to add {webPreferences: { nodeIntegration: true }} inside the BrowserWindow constructor. Security settings changed since he recorded this video.

    Reply
  3. There are many coding videos on the internet. Few are as good as this one. Kyle nailed it: clear descriptions, good scope, and good length, good example project on github.

    Reply
  4. Unfortunately, the bugfix at the end does not work for me. I followed your exact steps and I still get the same error. From the output, it still seems to generate its own index.html and overwrites the one I put in the src folder. What could be wrong here? EDIT: I examined the built app and in my app.asar there is only my code. No dependencies are packaged in.

    Reply
  5. How can I have both web and electron devs an builds for same source code ? since i dont have index.html during dev.
    Can you please specify such package.json

    Reply
  6. Hey Kyle! Fantastic video! Can you please illustrate how would you trigger an Electron renderer process from within Vue.js. Say, on click event to start a sub-process (i.e., child window) that loads a Vue.js component. I am running into problems when trying this. Much appreciated! 🙂

    Reply
  7. Great video Sir, one question. Do you know how can I include statics files(images, css, etc)? thank you very much, regards… sorry for my english

    Reply
  8. Great video tuts! I have question. Is it possible to build the app in one command and build for linux, windows and mac? I'm curious. Thanks

    Reply
  9. Hey Kyle, thanks for this tutorial. It seems awesome and exactly what I am looking for, but I am having an error pop up that I can't get passed.

    "CreateProcess failed with error 2: The system cannot find the file specified."

    I wrote about it in more detail here: https://github.com/electron-userland/electron-webpack/issues/181

    Any ideas?

    Thanks again!

    Reply
  10. +Kyle Robinson Young
    Hi. Very interesting. For beginners especially. But what about desktop real-time application based on Vue.js + Electron + WAMP router?

    Reply
  11. Nice video. One bizarre thing about this electron-webpack tools is how hard it is to tell it to use the index.html template configured in Webpack. Seems to only what to use an auto-injected one that hijacks the intended one (even your project). Thanks for sharing!

    Reply
  12. Wondering if you could clarify how to get a CSS library added to this *properly*. Having a bit of trouble with Semantic and UIKit (like, they don't work).

    Reply
  13. Thank you for your video! It's great! One off-topic question: How do you get your atom text editor to display package-lock.json and the node_modules folder in a light font color?

    Reply
  14. Dude you saved my ass! I barely comment youtube videos, but now it is necessary. I've tried my best to get electron + vue working, with and without the boilerplate "electron-vue". But I was too stupid and/or there was too much "magic" involved. Now with "electron-webpack" it is finally working, thank you!

    Reply
  15. Here's a note that's out of scope of this great tutorial, but something that caused me a little confusion RE: Electron processes (for Windows users). At some point I was trying to delete my 'dist' directory and was told files were still in use. Both the Main and Renderer processes were still running although I'd closed the app window. I'm new to Electron, but I had seen that one needs to explicitly quit the app when windows get closed using the following code (if distributing to Windows). I believe this is necessary for Windows and Linux (not for Mac).

    app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {

    app.quit()

    }

    })

    Reply
  16. Thanks for this walk-through! I've been wondering about the electron + vue combo recently. I had an issue with creating the index.html and re-building after installed source-map-support, went to your code example github link for reference but got a 404.

    Reply

Leave a Comment