simulatedgreg / electron-vue

An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.

The boilerplate for making electron applications built with vue (pretty much what it sounds like).

Overview

The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most used plugins like vue-router, vuex, and so much more.

Check out the detailed documentation here.

Things you'll find in this boilerplate...

• Basic project structure with a single package.json setup
• Detailed documentation
• Project scaffolding using vue-cli
• Ready to use Vue plugins (axios, vue-electron, vue-router, vuex)*
• Installed vue-devtools and devtron tools for development
• Ability to easily package your electron app using electron-packager or electron-builder*
• appveyor.yml and .travis.yml configurations for automated deployments with electron-builder*
• Ability to produce web output for browsers
• Handy NPM scripts
• Use of webpack and vue-loader with Hot Module Replacement
• Process restarting when working in main process
• HTML/CSS/JS pre-processor support with vue-loader
• ES6 with stage-0 by default
• Use of babili to remove the need of transpiling completely down to ES5
• ESLint (with support for standard and airbnb-base)*
• Unit Testing (with Karma + Mocha)*
• End-to-end Testing (with Spectron + Mocha)*

*Customizable during vue-cli scaffolding

Getting Started

This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app. The use of node@^7 or higher required. electron-vue also officially recommends the yarn package manager as it handles dependencies much better and can help reduce final build size with yarn clean.

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

Are you a Windows User?

Make sure to check out A Note for Windows Users to make sure you have all the necessary build tools needed for electron and other dependencies.

Wanting to use Vue 1?

Just point to the 1.0 branch. Please note that electron-vue has officially deprecated the usage of vue@^1, so project structure, features, and documentation will reflect those changes (legacy documentation).

vue init simulatedgreg/electron-vue#1.0 my-project

Next Steps

Make sure to take a look at the documentation. Here you will find useful information about configuration, project structure, and building your app. There's also a handy FAQs section.

Made with electron-vue

Take a look at some of the amazing projects built with electron-vue. Want to have your own project listed? Feel free add your project to the bottom of the list below then submit a pull request.

• Surfbird: A Twitter client built on Electron and Vue
• Lulumi-browser: Lulumi-browser is a light weight browser coded with Vue.js 2 and Electron
• Space-Snake: A Desktop game built with Electron and Vue.js.
• Forrest: An npm scripts desktop client
• miikun: A Simple Markdown Editor
• Dakika: A minute taking application that makes writing minutes a breeze
• Dynamoc: Dynamoc is a GUI client for dynamodb-local, dynalite and AWS dynamodb
• Dockeron: A dockeron project, built on Electron + Vue.js for Docker
• Easysubs: Download subtitles in a very fast and simple way
• adminScheduler: An application leveraging electron for cross platform compatibility, Vue.js for lightning fast UI and full-calendar.io to deliver a premium calendar interface.
• Backlog: Simple app for storing TODOs, ideas or backlog items. You can organize them with boards. Sleek flow. Built with Electron + Vue.js + iView
• Opshell: Ops tool to make life easier working with AWS instances.
• GitHoard: Hoard git repositories with ease.
• Data-curator: Share usable open data.
• Bookmark: Desktop app to manage bookmarked links using Atom Electron and Vue.js
• Uber Run: Simple automation desktop app to download and organize your tax invoices from Uber.
• Apollo: Convert YouTube videos (and more) to .mp3 files
• Netsix: Share videos with your friends in a real peer-to-peer manner using WebRTC.
• code-notes: A simple code snippet manager for developers built with Electron & Vue.js.
• Pomotroid: A simple and visually-pleasing Pomodoro timer
• MarkText: Mark Text is a realtime Markdown Editor.
• vue-design: the best website visualization builder with Vue and Electron
• ImapSync Client: It's only an Internet Message Access Protocol Synchronization Client
• Hve: A static blog client tool you may like.
• MarkdownFox: A simple Markdown viewer with auto update and PDF export.
• Smart DOCSE: A generic app which ability to display news, contact etc.
• Cleaver: Cleaver helps you provision servers ready for deploying your web apps with zero downtime - for free!
• XPanel: XAMPP control panel alternative built with Electron & Vue.js
• Hexo-Client: A hexo client powered by electron-vue.
• YT.Downloader: Youtube Video Downloader&Converter and Play Music, built with Electron & Vue.js.
• BMFont-JS: BMFont-js is a bitmap font generator, built with Electron & Vue.js.
• YouGet: YouGet - YouTube Video/Playlist Downloader/Cutter - MP3 Converter
• Asar UI: UI for Asar Pack, built with Electron & Vue.js.
• Leeze: A Receipt Record App, built with Electron & Vue.js.
• IntelTracker: An intel item tracker for players/speedrunners of NOLF.
• Metube: A program to manage your simple YouTube music player and enjoy your music
• it-tools: A programing helper for developers built with Electron & Vue.js.
• GifsWorld: Gifs finder built with Vue and Electron

electron-vue's Issues

What is the correct way to import fonts?

First of all, thank you for this amazing project.

Sorry but I'm new to the webpack workflow, and was not able to find a solution by myself.

In my project I've downloaded the Open Sans font from google, and put the css file and all font files in src/fonts/OpenSans (also tried dist/fonts/OpenSans) but when importing this file via require('src/fonts/OpenSans/fonts.css) in my main.js it always generete inumerous errors like:

ERROR in ./~/css-loader!./app/src/fonts/OpenSans/fonts.css
             Module not found: Error: Cannot resolve 'file' or 'directory' ./Open+Sans_800_italic.svg in C:\project\app\src\fonts\OpenSans

In my css file I have all @font-face definitions like this:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('./Open+Sans_300_normal.eot'); /* {{embedded-opentype-gf-url}} */
    src: local('☺'),
        url('./Open+Sans_300_normal.eot?#iefix') format('embedded-opentype'), /* {{embedded-opentype-gf-url}} */
        url('./Open+Sans_300_normal.woff') format('woff'), /* http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff */
        url('./Open+Sans_300_normal.ttf') format('truetype'), /* http://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTZS3E-kSBmtLoNJPDtbj2Pk.ttf */
        url('./Open+Sans_300_normal.svg#Open+Sans_300_normal') format('svg'); /* {{svg-gf-url}} */
}

What I'm doing wrong and what is the correct way to import this fonts?

Sorry for the bad english and I really appreciate any help you can provide

V 2.0 (next) not working or am I just lacking behind?

First of all, this boilerplate is wonderful! I am so thankful!

But I cannot get the 2.0 (next) version to work. Might be because I am doing some vue 2.0 wrong but I just have to ask.

What I could not get to work was simply the way of setting upp a vuex getter so that I can retreive the stores values. I did an experiment on fresh install on 1.0 and fresh install on (vext).

I changhed the LandingPageView in the same way:

<template>
...
-    <h1>Welcome.</h1>
+    <h1>Welcome. {{ mainCounter }}</h1>
+    <button @click="decrementMain">-</button>
+    <button @click="incrementMain">+</button>
...
</template>

<script>
...
+  import { mainCounter } from '../vuex/getters'
+  import { incrementMain, decrementMain } from '../vuex/actions'

  export default {
    components: {
      CurrentPage,
      Links,
      Versions
    },
+    vuex: {
+      getters: {
+        mainCounter
+      },
+      actions: {
+        incrementMain,
+        decrementMain
+      }
+    },
    name: 'landing-page'
  }
</script>

And all i get is:

vue.common.js?4eb4:2532[Vue warn]: Property or method "mainCounter" is not defined
on the instance but referenced during render. Make sure to declare reactive 
data properties in the data option. (found in component <landing-page>)

Same for incrementMain and decrementMain.

What am I missing?

Builded App is blank!

Hi there I was just play around with this electron-vue repo to test some other simple vuejs app that I was testing. Everything is fine with npm run dev but when I compile the apps using npm run build the app just display a blank page, I had no errors during building, I'm on linux, ubuntu 14.04.

Hope you can help me, I'm new in the webpack world.

Please use electron-prebuilt-compile

Please use https://github.com/paulcbetts/electron-prebuilt-compile

It makes electron app development so much easier by compiling all the assets without any fuss!

Cheers!

[feature] support main process bundling

Hi. I was looking to load and save the window state (width, height, maximised etc) and most of the time I see that it's recommended to use one of many storage packages on NPM. However, given that we can't use NPM packages within electron.js, how would you suggest going about this? Thanks.

Edit: Also, I imagine this would be a common thing that people would want in their Electron apps. Maybe it would be a good idea to add this to the boilerplate?

Which package.json file should additional npm modules be added to?

My app is trying to use the request module to download multiple files from the main process. When I run npm run dev it works fine and the files download properly, but when I run npm run build:darwin and then try to execute the app, I get this error:

Uncaught Exception:
Error: Cannot find module 'request'
    at Module._resolveFilename (module.js:440:15)
....

Reading the package structure documentation, I tried installing the request module in ./package.json under devDependencies, and also tried installing it in app/package.json under dependencies, but I still get the same error.

Which package.json file is the proper one to put additional node modules that will be needed by the compiled app? And do I need to do something special with electron-rebuild? I see it's installed with the project but I don't see it being used anywhere in the npm tasks.

Thank you

webpack 2

tell whether the config appears to webpack 2?

Cannot Get Route

Found an issue or bug? Tell me all about!

I'm just playing with the electron-vue and unfortunately, I am having an issue with creating a new route. I am creating a route using the following in `src/routes.js:

{
    path: '/application',
    name: 'application',
    component: require('components/ApplicationPageView')
}

And added a simple component that only display a message. I added the route link in the default Links.vue file like the following:

<li><a href="/application">Application</a></li>

Unfortunately, it doesn't work for me and shows cannot get route /application. Not sure what I am missing here. Any thoughts on this?

Apply Babel to main process

I'm really liking this boilerplate but I'd like to suggest applying the transpilation to the main process files as well, including the Electron entry point. This would keep things consistent by allowing not only import / export syntax just like in renderer files but also any other presets or plugins.

Along with this, it seems like it would benefit from a slightly more clear structure in terms of renderer & main processes. Say, within app/src you'd have /renderer as well as /main. For this I might suggest adding a second main process file to call from electron.js.. It doesn't have to really be very functional - just a simple starting point for this structure.

So my proposal is basically - transpile main process along with the renderer, and consider structuring the src directory something like this.

/app
|  /src
|  |  /main
|  |  |- electron.js
|  |  |- util.js
|  |  /renderer
|  |  |  /components
|  |  |  /vuex
|  |  |- App.vue
|  |  |- main.js
|  |  |- routes.js

Questions about building

Found an issue or bug? Tell me all about!

Describe the issue / bug.

• The final build file is too large. I try to make a build from a blank boilerplate and the size turns out to be like over 100mb.
• I made a build for my app, it's ok to work with me on my own computer but reported errors while on others. Is there anything I missed during the building process?

Tell me about your development environment.

• Node version: v5.3.0
• NPM version: 3.3.12
• vue-cli version: 2.1.0
• Operating System: 10.12.1 Beta

Thank you!

webpack-dev-server

webpack 'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.

OS windows 8.1 x64
node v6.9.1
npm 3.10.9

Wrong getting started guide

Hi,

I just followed your "Getting started" guide. But it didn't work (missing references) until I cd'ed into the app directory and executed npm install.

Issue with native node modules.

I've been beating my head against the wall to get webchimera.org to load. Specifically the module WebChimera.js.node from their prebuilt. I know it should work because I can get it to load in the main process and I've also done it succesffully in render with the demo wcjs-ugly-demo but for some reason adding your awesome template to the mix screws things up.

The main error is this...

ERROR in ./app/~/webchimera.js/WebChimera.js.node
         Module parse failed: /Users/gremlin/code/signal/app/node_modules/webchimera.js/WebChimera.js.node Unexpected character '�' (1:0)
         You may need an appropriate loader to handle this file type.
         SyntaxError: Unexpected character '�' (1:0)
             at Parser.pp$4.raise (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:2221:15)
             at Parser.pp$7.getTokenFromCode (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:2756:10)
             at Parser.pp$7.readToken (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:2477:17)
             at Parser.pp$7.nextToken (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:2468:15)
             at Parser.parse (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:515:10)
             at Object.parse (/Users/gremlin/code/signal/node_modules/acorn/dist/acorn.js:3098:39)
             at Parser.parse (/Users/gremlin/code/signal/node_modules/webpack/lib/Parser.js:902:15)
             at DependenciesBlock.<anonymous> (/Users/gremlin/code/signal/node_modules/webpack/lib/NormalModule.js:104:16)
             at DependenciesBlock.onModuleBuild (/Users/gremlin/code/signal/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
             at nextLoader (/Users/gremlin/code/signal/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
             at /Users/gremlin/code/signal/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5
             at Storage.finished (/Users/gremlin/code/signal/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16)
             at /Users/gremlin/code/signal/node_modules/graceful-fs/graceful-fs.js:78:16
             at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:445:3)
          @ ./app/~/webchimera.js/index.js 1:17-48

But I'm pretty sure webpack shouldn't be reading binary files like that.

To fix it I've tried so many different things, like externals but nothing seems to work.

{ 
  externals: { 'webchimera.js': "commonjs2 webchimera.js" }
}

that does let the page load but it'll never find webchimera.js if I tried to require it.

I'm on the verge of dropping webpack for gulp

no such file or directory, open '.../node_modules/electron-prebuilt/path.txt'

After "npm run dev" i got this:

"webpack  webpack: bundle is now VALID.

Starting electron...

electron  fs.js:640
            return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
                           ^

          Error: ENOENT: no such file or directory, open '/home/mk/Desktop/electron-vue/my-project/node_modules/electron-prebuilt/path.txt'
              at Error (native)
              at Object.fs.openSync (fs.js:640:18)
              at Object.fs.readFileSync (fs.js:508:33)
              at Object.<anonymous> (/home/mk/Desktop/electron-vue/my-project/node_modules/electron-prebuilt/index.js:4:42)
              at Module._compile (module.js:556:32)
              at Object.Module._extensions..js (module.js:565:10)
              at Module.load (module.js:473:32)
              at tryModuleLoad (module.js:432:12)
              at Function.Module._load (module.js:424:3)
              at Module.require (module.js:483:17)
"

Earlier, during installation (after (sudo) npm install ) i got "gyp errors":

npm ERR! Linux 3.19.0-32-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v6.4.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the nslog package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild

Devtron lint check "Using latest Electron version" fails

Devtron lint check "Using latest Electron version" fails with the error in the console:

Fetch API cannot load https://atom.io/download/atom-shell/index.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Electron Vue CLI

It would be really cool if there was a CLI so that we could have some sort of "stripped down" version of electron vue.

Great bolierplate though!

can not pack sequelize with sqlite3

• Node version:6.3.1
• NPM version:3.10.3
• vue-cli version: (if necessary)
• Operating System:win10

webpack can not pack sequelize and sqlite3? how to solve this

Where should the static file to be placed?

There's no static folder in the project. So where to put them (like images, fonts, etc.)? /app/dist?

electron-devtools-installer Failed to fetch extension

A lot of outdated dependencies

Using 100% default settings in vue-cli.

Checked with a completely untouched fresh package.json

Dev environment

[Major] Dependencies that are out of declared version range in package.json:

cross-env ^1.0.7 → ^3.1.3
css-loader ^0.23.1 → ^0.25.0
electron-devtools-installer ^1.1.4 → ^2.0.1
eslint ^2.10.2 → ^3.9.1
eslint-config-standard ^5.1.0 → ^6.2.1
eslint-plugin-promise ^1.0.8 → ^3.3.1
eslint-plugin-standard ^1.3.2 → ^2.0.1
file-loader ^0.8.5 → ^0.9.0
inject-loader ^2.0.1 → ^3.0.0-beta2
karma-electron ^4.1.1 → ^5.1.1
webpack-merge ^0.14.1 → ^0.15.0
vue-hot-reload-api ^1.3.2 → ^2.0.6

[Minor] Dependencies that are within the declared version range in package.json but are still behind:

babel-core ^6.8.0 → ^6.18.2
babel-loader ^6.2.4 → ^6.2.7
babel-plugin-transform-runtime ^6.8.0 → ^6.15.0
babel-preset-es2015 ^6.6.0 → ^6.18.0
babel-preset-stage-0 ^6.5.0 → ^6.16.0
babel-runtime ^6.6.1 → ^6.18.0
del ^2.2.1 → ^2.2.2
devtron ^1.1.0 → ^1.4.0
electron ^1.3.1 → ^1.4.6
electron-packager ^8.0.0 → ^8.2.0
electron-rebuild ^1.1.3 → ^1.3.0
babel-eslint ^7.0.0 → ^7.1.0
eslint-friendly-formatter ^2.0.5 → ^2.0.6
eslint-loader ^1.3.0 → ^1.6.1
eslint-plugin-html ^1.3.0 → ^1.6.0
html-webpack-plugin ^2.16.1 → ^2.24.1
karma-mocha ^1.2.0 → ^1.3.0
babel-register ^6.14.0 → ^6.18.0
require-dir ^0.3.0 → ^0.3.1
mocha ^3.0.2 → ^3.1.2
vue-html-loader ^1.2.2 → ^1.2.3
vue-loader ^9.5.1 → ^9.8.1
webpack ^1.13.0 → ^1.13.3
webpack-dev-server ^1.14.1 → ^1.16.2

App Framework

[Major] Dependencies that are out of declared version range in package.json: none.

[Minor] Dependencies that are within the declared version range in package.json but are still behind:

vue ^2.0.1 → ^2.0.5
vue-electron ^1.0.0 → ^1.0.4
vue-router ^2.0.0 → ^2.0.1

You can use Gemnasium or a similiar service to automatically track dependencies for you.

Create a child browser window as a child Vue component?

This isn't an issue with the boilerplate itself but a general question working with Vue and Electron together (I'm new to both technologies). Is it possible to spawn a child browser window as a child Vue component from the main application?

Basically my main Vue app is logging financial data, I want to add a button that would create a child modal that takes the data as a prop then charts it. However, I have no clue how to approach I'd like to hear how someone would handle this having experience with both technologies.

From https://github.com/electron/electron/blob/master/docs/api/frameless-window.md

Creating a new window:

const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
win.show()

How would I wrap this into a single file .vue component, how would I share state between two browser windows (if it is even possible)?

Error: must specify version

Dear @SimulatedGREG
When I build with

npm run build:darwin

one error occurs.

Building electron app(s)...

Error: must specify version
    at download (/Users/wxl/projects/bg/node_modules/electron-download/index.js:16:27)
    at Array.<anonymous> (/Users/wxl/projects/bg/node_modules/electron-packager/index.js:121:7)
    at each (/Users/wxl/projects/bg/node_modules/run-series/index.js:17:24)
    at next (/Users/wxl/projects/bg/node_modules/rimraf/rimraf.js:74:7)
    at CB (/Users/wxl/projects/bg/node_modules/rimraf/rimraf.js:110:9)
    at /Users/wxl/projects/bg/node_modules/rimraf/rimraf.js:136:14
    at FSReqWrap.oncomplete (fs.js:123:15)
Build(s) successful!
undefined

DONE

I think there is a problem with config.js, because when I change

building:{
  'app-version': pkg.version,
  ......
}

to

building:{
  version: '1.3.2', // pkg.version,
  ......
}

which is the version of electron-prebuilt. It works!!!

Landing page showing as Anonymous Component

Quick fix for this:

In app/src/routes.js

import Vue from 'vue'

export default {
  '/': {
    component: Vue.component('landing-page', require('./components/LandingPageView'))
  }
}

Then just add name to your component like so:

In app/src/components/LandingPageView.vue

...
export default {
    components: {
      CurrentPage,
      Links,
      Versions
    },
    name: 'landing-page'
  }
...

NPM errors on running lint script

I wasn't entirely sure whether to post this here, at eslint, or eslint-friendly-formatter, so please let me know if this is the wrong place.

When I run the lint script, if there are any problems detected, I get these errors shown below, and the lint:fix script won't function either.

D:\David\Documents\my-project  ([email protected])
λ npm run lint

> [email protected] lint D:\David\Documents\my-project
> eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app


  ✘  http://eslint.org/docs/rules/semi  Extra semicolon
  D:\David\Documents\my-project\app\src\App.vue:35:37
  import store from 'src/vuex/store';
                                       ^


✘ 1 problem (1 error, 0 warnings)


Errors:
  1  http://eslint.org/docs/rules/semi

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
npm ERR! node v4.5.0
npm ERR! npm  v2.15.9
npm ERR! code ELIFECYCLE
npm ERR! [email protected] lint: `eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] lint script 'eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app'.
npm ERR! This is most likely a problem with the my-project package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs my-project
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR!     npm owner ls my-project
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\David\Documents\my-project\npm-debug.log

npm-debug.log below:

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'lint' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prelint', 'lint', 'postlint' ]
5 info prelint [email protected]
6 info lint [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec lint script
9 verbose stack Error: [email protected] lint: `eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:217:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at EventEmitter.emit (events.js:172:7)
9 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:829:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\David\Documents\my-project
12 error Windows_NT 10.0.10586
13 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lint"
14 error node v4.5.0
15 error npm  v2.15.9
16 error code ELIFECYCLE
17 error [email protected] lint: `eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app`
17 error Exit status 1
18 error Failed at the [email protected] lint script 'eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app'.
18 error This is most likely a problem with the my-project package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter app
18 error You can get information on how to open an issue for this project with:
18 error     npm bugs my-project
18 error Or if that isn't available, you can get their info via:
18 error
18 error     npm owner ls my-project
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

I ran vue init simulatedgreg/electron-vue my-project, left everything at defaults, chose ESLinting with Standard, and ran npm install. Then I inserted a semi-colon in one of the Vue files to cause a problem, and ran npm run lint.

• Node version: 4.5.0 LTS
• NPM version: 2.15.9
• vue-cli version: 2.3.1
• Operating System: Windows 10 x64

How do I correctly load fonts in my project

Sorry, duplicated from #53

Uncaught Error: Received packet in the wrong sequence - if config.devtool = '' with mysql driver

Hi ,

I am using for quite some time the mysql node driver in my Electron projects which works fine. But now while using this boilerplate, my production builds throw:

Uncaught Error: Received packet in the wrong sequence.

After some testing I have realised that the error goes away if I keep/set config.devtool = 'eval' in the webpack.conf.js file:

if (process.env.NODE_ENV === 'production') {
  config.devtool = '' // <----- this will throw Uncaught Error if I omit 'eval'

  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"production"'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  )
}

HomeView.vue

<script>
  var mysql = require('mysql')
  var connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'EONIC'
  })

  connection.connect()
  connection.query('SELECT * from products', function (err, rows, fields) {
    if (err) throw err <---- here will the error happen
    console.log(rows)
  })

  connection.end()

</script>

error happening in mysql/lib/protocol/Protocol.js at line 272:

 if (!sequence[packetName]) {
    var err   = new Error('Received packet in the wrong sequence.');
    err.code  = 'PROTOCOL_INCORRECT_PACKET_SEQUENCE';
    err.fatal = true;

    this._delegateError(err);
    return;
  }

Keeping config.devtool = 'eval' solves the problem but this way my project slows down. Tested using a bare electron install, no error in production builds.

The error is really easy to reproduce: fresh electron-vue install + mysql node driver, write a simple query and as you make a production build the error shows up.

** Latest version of the boilerplate
** OS:
OSX 10.11 / Windows 7 / Ubuntu 16.04

Doing a package with a clean project opens up browserfile blank

I did a clean cli init.
did a build for mac/windows
But it come up as a blank browserWindow

vue-cli · Missing helper: "isEnabled"

After init, console shows this message

# lanbin @ lanbindeMBP in ~ [20:47:52] 
$ vue init simulatedgreg/electron-vue teleconverter

? name teleconverter
? author lanbin <mail.com>
   vue-cli · Missing helper: "isEnabled"

• Node version: v6.0.0
• NPM version: 3.8.6
• Operating System: MacOS 10.11.6

jQuery - '$' is not defined

Hi,

I need jQuery to have Bootstrap working. Following the docs I did:

1. npm install bootstrap --save
2. npm install jquery --save
3. imported both into main.js:

import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.min.js'

And finally added this to webpacj.config.js:

  new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })

Now, bootstrap works. But if I try to test jQuery using:

  $(document).ready(function () {
    alert()
  })

I get this error in terminal:

✘ http://eslint.org/docs/rules/no-undef '$' is not defined
/App Projects/Electron/vue/app/src/components/LandingPageView.vue:42:3
$(document).ready(function () {
^

I use the latest electron-vie build.

By the way, what does the "..." notation mean here:

new Vue({
  router,
  ...App
}).$mount('#app')

vue-devtools?

I don't see any vue-devtools in my machine? Am I doing something wrong?

v-link directive not found

Using electron-vue (this has been amazing so far btw : ) ), I can't seem to use v-link in my Components, the devtools error with [Vue warn]: Failed to resolve directive: link (found in component <login>)

Use the v-link directive in a Component.vue. Everything else has been untouched from setup.

• Node version: 4.5.0
• NPM version: 2.15.9
• Operating System: Windows 10

windows npm post install

windows 8.1
npm ERR! node v6.9.1
npm ERR! npm v3.10.9

eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix app

Cannot read property 'length' of null
TypeError: Cannot read property 'length' of null
at D:\tyrbambam\node_modules\eslint-friendly-formatter\index.js:181:73
at Array.reduce (native)
at module.exports (D:\tyrbambam\node_modules\eslint-friendly-formatter\index.js:157:17)
at printResults (C:\Users\vanleif\AppData\Roaming\npm\node_modules\eslint\lib\cli.js:84:14)
at Object.execute (C:\Users\vanleif\AppData\Roaming\npm\node_modules\eslint\lib\cli.js:192:17)
at Object. (C:\Users\vanleif\AppData\Roaming\npm\node_modules\eslint\bin\eslint.js:76:28)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)

Can't use npm modules inside electron.js

Describe the issue / bug.

Can't use npm modules inside electron.js. (socket.io for example)

I know the node_modules are removed in the final build, but they seem to work only when included inside the Vue instance.

Is there some way i can still require these in electron.js?

How can I reproduce this problem?

npm install --save socket.io
cd app 
npm install --save socket.io
npm run build:win32
# then execute exe

/app/electron.js

const io = require('socket.io')

If visual, provide a screenshot.

Tell me about your development environment.

• Node version: 6.5.0
• NPM version: 3.10.8
• Operating System: Win 10

ESLint doesn't lint inline JS

Screenshot of area it should be linting.

Using Visual Studio Code Version 1.7.0-insider
Commit 9e7d70052908b633e0d4f71e70b26714bd1d2f10
Date 2016-11-02T05:39:07.207Z

With it's respective ESLint plugin version 1.0.8

`npm vue:route routeName` is broken.

Describe the issue / bug.

#

It looks like tasks/vue/route.js is malformed after generating a project. Specifically, this chunk, on line 25 of the generated file:

routes.splice(
  routes.length - 2,
  0,
  routesTemplate
    .replace(//g, routeName) // <--- this isn't a valid regex expression, so the javascript parser barfs.
    .replace(/\n$/, '')
)

How can I reproduce this problem?

#
vue init simulatedgreg/electron-vue my-project
npm run vue:route foobar

Tell me about your development environment.

• Node version: 7.1.0
• NPM version: 3.10.9
• vue-cli version: 2.5.0
• Operating System: Ubuntu Linux 16.04

getting some errors when install

Found an issue or bug? Tell me all about!

Describe the issue / bug.

getting err message when running install

gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 69
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:276:23)
gyp ERR! stack     at emitTwo (events.js:87:13)
gyp ERR! stack     at ChildProcess.emit (events.js:172:7)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Darwin 15.6.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/brodyr/Documents/Sites/smart-lock/node_modules/nslog
gyp ERR! node -v v4.5.0
gyp ERR! node-gyp -v v3.4.0
gyp ERR! not ok 

How can I reproduce this problem?

Install vue-cli and scaffold boilerplate

npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

Install dependencies and run your app

cd my-project
npm install
npm run dev

If visual, provide a screenshot.

Tell me about your development environment.

• Node version: 4.5.0
• NPM version: 3.10.8
• vue-cli version: (if necessary)
• Operating System: macos

If you are looking to suggest an enhancement or feature, then feel free to remove everything above.

Use main process modules from the Vue component.

Hi!

I have some questions using main process modules from some components. For example, I want to click a button and trigger the main process event. just like that:

In one component.

//  ../../electron => main process javascript file
openFile() {
    this.$electron.remote.require('../../electron').openFile();
}

I think, you should know, after webpack bundling, when i click the button, it would throw an error:

Uncaught Error: Cannot find module '../../electron'

And then, do you have any good solutions?

serve with hot reload error

when run npm run dev

error msg：

Starting electron...

electron  events.js:160
                throw er; // Unhandled 'error' event
                ^

          Error: spawn /Users/lidashuang/code/cc_activity/node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron ENOENT
              at exports._errnoException (util.js:1026:11)
              at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
              at onErrorNT (internal/child_process.js:359:16)
              at _combinedTickCallback (internal/process/next_tick.js:74:11)
              at process._tickCallback (internal/process/next_tick.js:98:9)
              at Module.runMain (module.js:609:11)
              at run (bootstrap_node.js:382:7)
              at startup (bootstrap_node.js:137:9)
              at bootstrap_node.js:497:3

development environment.

• Node version: v7.0.0
• NPM version: 3.10.8
• Operating System: macOS

error MSB4019:

durring npm install:
Can't find solution.
error MSB4019: The imported project "G:\Microsoft.Cpp.Default.props" was not found. Confirm that the path in the declaration is correct, and that the file exists on disk.

npm install failed

Found an issue or bug? Tell me all about!

Describe the issue / bug.

I have a problem when install packages. When i run npm run install i have 2 problems :

npm WARN prefer global [email protected] should be installed with -g

> [email protected] install D:\Dev\test\demo-vuejs-electron\node_modules\nslog
> node-gyp rebuild


D:\Dev\test\demo-vuejs-electron\node_modules\nslog {git}{hg}
{lamb} if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd D:\Dev\test\demo-vuejs-electron\node_modules\nslog
gyp ERR! node -v v6.7.0
gyp ERR! node-gyp -v v3.3.1
gyp ERR! not ok

and

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]
npm WARN [email protected] requires a peer of electron-prebuilt@^1.2.1 but none was installed.
npm WARN [email protected] No repository field.
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v6.7.0
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-gyp rebuild`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-gyp rebuild'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the nslog package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-gyp rebuild
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs nslog
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls nslog
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     D:\Dev\test\demo-vuejs-electron\npm-debug.log

Tell me about your development environment.

• Node version: 6.7.0
• NPM version: 3.10.3
• vue-cli version: 2.4.0
• Operating System: Windows 10 x64

Suggest to support LiveScript

Dear @SimulatedGREG
Thank you very much! This project help me a lot! But I partially failed when I add LiveScript. It is easy to use LiveScript inside Vue's component, but outside. I have tried for a long time but never found a similar solution. Could not understand why adding this snippet in webpack.config.js does not work. @roosephu would you like to share more knowledge on this issue? Thanks.

{
      test: /\.ls$/,
      loader: 'livescript-loader'
},

Vue-cli installation doesn't install vue-*

During vue-cli scaffolding selecting vue-router, vuex and vue-resource doesn't install them actually.

vue unit and e2e is not avilable

hi

I want to test my apps . this is easy with Webpack template because it is install the needed packages and setup karma config with sample example for unit and e2e tests .

do you have plans for testing scaffold or not ?

thank you for the hard work .

Cannot use import components

Found an issue or bug? Tell me all about!

Describe the issue / bug.

Gives error Unknown custom element: <mu-menu-item> - did you register the component correctly? when I install Muse-UI and use the components in the library after Vue.use(MuseUI) . Gives same error with other custom components of other libraries e.g. Vue-mdl.

It works though when I import custom components separately instead of using Vue.use(MuseUI)

How can I reproduce this problem?

1. npm i -S muse-ui,
2. add import MuseUI from 'muse-ui' and Vue.use(MuseUI) to main.js
3. Use the components of muse ui.

If visual, provide a screenshot.

#

Tell me about your development environment.

• Node version:4.2.6
• NPM version:3.5.2
• vue-cli version: (if necessary)2.5.0
• Operating System:

If you are looking to suggest an enhancement or feature, then feel free to remove everything above.

dist/fonts empty if "ignore: /icons/" present in build options - Bootstrap custom fonts crashing

For about a day now, I am trying to figure out why bootstrap glyphicons aren't showing up in my production builds.

While looking at dev-tools (in production app) I found:

x64_error/test.app/Contents/Resources/app/dist/fonts/glyphicons-halflings-regular.fa27723.woff net::ERR_FILE_NOT_FOUND
x64_error/test.app/Contents/Resources/app/dist/fonts/glyphicons-halflings-regular.e18bbf6.ttf net::ERR_FILE_NOT_FOUND

Than I have checked ./config.js to see what gets ignored. As I have removed the ignore statement, all the bootstrap fonts were exported correctly.

I have tried to remove the ignored paths one by one, in the end I have realized that if I remove: |icons the fonts get exported.

What has the icons folder doo with the fonts folder and bootstrap fonts export??

This is how the build statement works for now:

...
building: {
    //  arch: 'ia32',
    arch: 'x64',
    asar: false,
    dir: path.join(__dirname, 'app'),
    icon: path.join(__dirname, 'app/icons/icon'),
    //  ignore: /node_modules|src|index.ejs|icons/,
    ignore: /node_modules|src|index.ejs/, // <--- fonts are exported if ' \icons ' is ommited
    out: path.join(__dirname, 'builds'),
    overwrite: true,
    platform: process.env.PLATFORM_TARGET || 'all'
  }
}

the way I import bootstrap:

main.js:

import Vue from 'vue'
import Electron from 'vue-electron'
import Resource from 'vue-resource'
import Router from 'vue-router'

import App from './App'
import routes from './routes'

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

Vue.use(Electron)
Vue.use(Resource)
Vue.use(Router)
Vue.config.debug = true

const router = new Router({
  scrollBehavior: () => ({ y: 0 }),
  routes
})

/* eslint-disable no-new */
new Vue({
  router,
  ...App
}).$mount('#app')

export results:

electron.js in ES6?

Any way we can write the electron.js in ES6?

I'm guessing its just a matter of having babel compile it, but i'm having trouble reading the task reunners

Cannot require() node modules in builds

So I wanted to create a simple GUI to start up a BrowserSync server for our QA team.
I cannot figure out why browsersync is unavailable after building.

The app works as expected when using it in development via
npm run dev

After I try to build the app for darwin using:
npm run build:darwin

The app seems to build fine, but after trying to run it I get the error:
"Uncaught Exception: Error Cannot Find Module 'browser-sync' ... "

I have followed the steps outlined here:
https://github.com/electron/electron/blob/master/docs/tutorial/using-native-node-modules.md
for building node modules for electron but have not seen any difference in the outcome. I'm wondering if i missed something in configuring the webpack build?

• Node version: v5.9.1
• NPM version: 3.7.3
• vue-cli version: 2.4.0
• Operating System: macOS Sierra 10.21.1

RouterApp showing as fragmented in Vue Devtools

Just a quick wrap with divs fixes this error:

In App.vue file - app/src/App.vue

<template>
    <router-view></router-view>
</template>

to

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Does not work.

Module not found: Error: Cannot resolve module 'vue'
[...]
Multiple loading errors on Win 7/Electron 1.3.5 makes it pretty much useless. Sorry.

dangling comma

Fresh install:

     ERROR in ./app/src/App.vue

       ✘  http://eslint.org/docs/rules/comma-dangle  Unexpected trailing comma
       /Users/Tektango/projects/stack/dev-studio/app/src/App.vue:39:6
         },
             ^


     ✘ 1 problem (1 error, 0 warnings)

Removed comma in my build and all well....