This problem occurs when I try to pack.

• OS Version: Windows_NT ia32 10.0.16294
• Node version: v8.6.0
• NPM version: 5.4.2

Steps to Reproduce:

npm run package:win
(npm run build && electron-packager ./ nuxt-cli --platform=win32 --arch=x64 --version=1.7.8 --out=./ --overwrite --icon=favicon.ico --ignore=node_modules --prune)

For developers who are looking for a reliable solution with configured electron-builder, unit / e2e testing.

https://github.com/michalzaq12/electron-nuxt

I'm trying to pass on a message from the main process to a vue component, but requiring electron inside a vue component doesn't work (Can't resolve 'fs' in...electron error). Looking at #3 it seems we can't include most packages, such as electron itself inside a vue component. So how is it done?

I've used this template, generated app. In dev mode everything works ok. But If I build the app I get this:

package.json:

{
  "name": "metod-admin",
  "version": "1.0.0",
  "description": "METOD admin client",
  "author": "Terion <[email protected]>",
  "private": true,
  "main": "main.js",
  "build": {
    "appId": "com.metod-admin.app",
    "directories": {
      "buildResources": "static"
    }
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=DEV electron .",
    "dev:web": "cross-env NODE_ENV=DEV BUILD_TARGET=web  nuxt",
    "build": "nuxt build && electron-builder",
    "build:web": "cross-env nuxt build",
    "start": "cross-env nuxt build && nuxt start"
  },
  "dependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "apexcharts": "^2.0.9",
    "element-ui": "^2.4.7",
    "lockr": "^0.8.5",
    "nuxt": "^2.1.0",
    "nuxt-babel": "^0.1.2",
    "nuxt-i18n": "^5.3.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "underscore": "^1.9.1",
    "vue-apexcharts": "^1.2.1",
    "vue-lodash": "^2.0.0",
    "vue-wysiwyg": "^1.7.2",
    "vue2-editor": "^2.6.6",
    "vuedraggable": "^2.16.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "cross-env": "^5.2.0",
    "electron": "2.0.0-beta.7",
    "electron-builder": "^20.8.1",
    "electron-devtools-installer": "^2.2.3",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

Hi,

Nice package! I'm facing an issue that blocks the loading, apparently caused by the axios package (https://github.com/nuxt-community/axios-module).
I get a "Cannot read property 'env' of undefined" error :

Any idea how to fix this? :) Thanks!

Hi there,

i already have a proyect using Nuxt and i want to make it an APK, how can i install this template to an existing proyect without affecting the code already writen??

Thanks in advance

i'm noob, just wanna close the app without frame

this is my code

<script> const remote = require('electron').remote export default { methods: { close () { remote.getCurrentWindow().close() } } } </script>

need some help please

I'm getting a fatal error when I try to use <style lang="scss">.
On OSX El Capitan 10.11.6, if I install the sass-loader with:

yarn add --dev sass-loader node-sass

...and then try to do yarn run dev, I get the following error:

Module build failed: Error: Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime (53)

I'm confused about this error, because scss works just fine with other vue+electron projects like SimulatedGREG/electron-vue. I don't understand why the sass-loader or node-sass would be trying to un under a different environment, regardless of if electron is used. Any idea?

The Nuxt core team does not have the bandwidth to maintain this template.

If anyone wants to help us maintain it, please comment on this issue, otherwise, we will archive this project 😞

Guys, I know, you spend a lot of time for release nuxt@1, and it's great, but when you have a time, please update this template for actual version. Thanks

I am referring to #3 and #4 . Now I have this

// nuxt.config.js
...
build: {
    extend (config, {isClient}) {
      // Extend only webpack config for client-bundle
      if (isClient)
      {
        config.target = 'electron-renderer'
      }
    },
    vendor: ['vuetify', 'axios']
  },
...

And if I go to the _NUXT_URL_ in my browser, I get the common error that require is not defined and so my app doesn't do that much.
Well, I am not that much of a front-end developper but isn't there any way to get this work in the browser too ?
Maybe browserify or something would do the job ?
The idea would be to have the app working when embed in electron and in the browser.

OR

Would it be possible to access process from store/index.js as it is supposed to be available for both main and renderer process ? (see here)

process seems to be undefined when called in this file.

It might not be possible though.

Version

v1.1.1

Reproduction link

https://codepen.io/gaspergrom/pen/bxQNgB

Steps to reproduce

in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss

in normal nuxt structure i can easly add scss like this but in electron template i can't add it ... i have to add css not scss

What is expected ?

to compile scss to css in nuxt structure

What is actually happening?

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

..\assets\css\global.scss in ./.nuxt/App.js
To install it, you can run: npm install --save ..\assets\css\global.scss

Hello, is there any way to fix this warning?

首先，非常感谢您的分享，但是，在使用过程种遇到了很多问题，如下：
1,用到了nuxtjs，那么就期待多端发布，如桌面app和website，可是命令中并不包含website的命令
2,期待在nuxtjs官方的模板下添加electron打包命令，且分成web和app两个目录

Cannot use static assets.

I am new to electron and I just tried to use electron-packager to make an executable app with electron-packager . Although there isn't any error messages but the app generated is not usable.

How should I do to build this app on desktop ? did I missing any configs ?

Thanks for answering.

nuxt/nuxt#1635

I have done a fresh install followed all instructions and sass loader. I'm not so concerned about configs as I am making this a professional grade product. I should not be having this problem and if you want to replicate my problem simple...
git clone
cd my-project
yarn install
... and then modify a component to use SCSS and it will literally break in pieces in a sea of red. This should not be happening at all guys!

electron . is working but when I built using electron-builder and run the app the express server is running but when launch on browser it just keeps loading with white screen

Version

v1.1.1

Reproduction link

https://github.com/terion-name/metod-admin-temp

Steps to reproduce

yarn build

What is expected ?

app works

What is actually happening?

Cannot GET /

Additional comments?

I've used this template, generated app. In dev mode everything works ok. But If I build the app I get this:

package.json:

{
  "name": "metod-admin",
  "version": "1.0.0",
  "description": "METOD admin client",
  "author": "Terion <[email protected]>",
  "private": true,
  "main": "main.js",
  "build": {
    "appId": "com.metod-admin.app",
    "directories": {
      "buildResources": "static"
    }
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=DEV electron .",
    "dev:web": "cross-env NODE_ENV=DEV BUILD_TARGET=web  nuxt",
    "build": "nuxt build && electron-builder",
    "build:web": "cross-env nuxt build",
    "start": "cross-env nuxt build && nuxt start"
  },
  "dependencies": {
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-flow": "^7.0.0",
    "apexcharts": "^2.0.9",
    "element-ui": "^2.4.7",
    "lockr": "^0.8.5",
    "nuxt": "^2.1.0",
    "nuxt-babel": "^0.1.2",
    "nuxt-i18n": "^5.3.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "underscore": "^1.9.1",
    "vue-apexcharts": "^1.2.1",
    "vue-lodash": "^2.0.0",
    "vue-wysiwyg": "^1.7.2",
    "vue2-editor": "^2.6.6",
    "vuedraggable": "^2.16.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.1",
    "cross-env": "^5.2.0",
    "electron": "2.0.0-beta.7",
    "electron-builder": "^20.8.1",
    "electron-devtools-installer": "^2.2.3",
    "eslint": "^4.15.0",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^4.0.0"
  }
}

When I want to build my app which work fine in development mode:

npm run build

After the successful nuxt build, I got this error:

Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
  • electron-builder version=20.39.0
  • loaded configuration file=package.json ("build" field)
  • writing effective config file=dist/builder-effective-config.yaml
  • rebuilding native production dependencies platform=linux arch=x64

Error: /usr/bin/node exited with code 1
Output:

> [email protected] install /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
> node-pre-gyp install --fallback-to-build && node node_modules/rimraf/bin.js build

Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node --module_name=lzma_native --module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64' (1)

Error output:
node-pre-gyp ERR! Tried to download(404): https://node-pre-gyp.addaleax.net/lzma-native/lzma_native-v3.0.8-electron-v2.0-linux-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (electron-v2.0 ABI, glibc) (falling back to source compile with node-gyp) 
node-pre-gyp ERR! Tried to download(undefined): https://node-pre-gyp.addaleax.net/lzma-native/lzma_native-v3.0.8-electron-v2.0-linux-x64.tar.gz 
node-pre-gyp ERR! Pre-built binaries not found for [email protected] and [email protected] (electron-v2.0 ABI, glibc) (falling back to source compile with node-gyp) 
gyp: Call to 'sh liblzma-config.sh "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/build" "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/deps/xz-5.2.3.tar.bz2"' returned exit status 1 while in binding.gyp. while trying to load binding.gyp
gyp ERR! configure error 
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onCpExit (/usr/lib/node_modules/node-gyp/lib/configure.js:345:16)
gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
gyp ERR! System Linux 5.0.0-arch1-1-ARCH
gyp ERR! command "/usr/bin/node" "/usr/lib/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node" "--module_name=lzma_native" "--module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64"
gyp ERR! cwd /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
gyp ERR! node -v v10.15.3
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
node-pre-gyp ERR! build error 
node-pre-gyp ERR! stack Error: Failed to execute '/usr/bin/node /usr/lib/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64/lzma_native.node --module_name=lzma_native --module_path=/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/binding-v3.0.8-electron-v2.0-linux-x64' (1)
node-pre-gyp ERR! stack     at ChildProcess.<anonymous> (/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack     at ChildProcess.emit (events.js:189:13)
node-pre-gyp ERR! stack     at maybeClose (internal/child_process.js:970:16)
node-pre-gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
node-pre-gyp ERR! System Linux 5.0.0-arch1-1-ARCH
node-pre-gyp ERR! command "/usr/bin/node" "/mnt/data/workspace/retrobox/desktop/node_modules/lzma-native/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /mnt/data/workspace/retrobox/desktop/node_modules/lzma-native
node-pre-gyp ERR! node -v v10.15.3
node-pre-gyp ERR! node-pre-gyp -v v0.6.39
node-pre-gyp ERR! not ok 

Hi,

I am using this starter to migrate my electron app to Nuxt and so far I really like it.

Yet, I have a problem. Actually I have a solution to it and I understand why it is this way but I'd like to get it working just like any electron page.

Electron allows one to get rid (until a certain point) of client and server-side. But here, it is not possible to require any package needing fs, tls and net (which includes a lot of packages). In a normal website or Nuxt project, this would be completely normal but here it can be problematic and troublesome sometimes isn't it ?

I could not even require('electron-router') in the store or on client-side.

So right now, I have to make routes like this for example:

// main.js
const route = require('./assets/scripts/init/main.js').route(nuxt)
const server = http.createServer(route)

// assets/scripts/init/main/js
const URL = require('url-parse')

const {openExternal} = require('./openExternal.js')
const releases = require('./releases.js')
const seasons = require('./seasons.js')

exports.route = (nuxt) => {
  return (req, res) => {
    const url = new URL(req.url)

    switch (url.pathname)
    {
      case '/openThis':
        openExternal(url, res)
        break

      case '/seasons.json':
        seasons.getSeason(url, res)
        break

      case '/releases.json':
        releases.getLatest(url, res)
        break

      default:
        nuxt.render(req, res)
    }
  }
}

Isn't it possible for client to have access to any module as well just like in a basic electron app where I could just require('fs') anywhere in the app?

I do not intend to criticise anything, just asking 😮

I extracted the created installer. But there is all my source code does not minified vue files.
If I extract below file:
$PLUGINSDIR\app-64\resources\app.asar

I think that it is not expected.

Hi,
how to add plugins in nuxt.config.js?
I am trying to add vuetify this.
like this

module.exports = {
  /*
  ** Electron Settings
  */
  electron: {
    width: 1024,
    height: 768
  },
  build: {
    vendor: ['vuetify'],
    plugins: ['~plugins/vuetify.js'],
    head: {
      link: [
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' },
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ]
    },
    extend (config, { isClient }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        config.target = 'electron-renderer'
      }
    }
  }
}

Hey guys, I am trying to figure out how to start a nuxtjs app with express and electron. What I have tried so far is using the express-template and installing electron, electron-devtools-installer then I copied the main.js code to start electron from electron-template and pasted it into the start method in the express-template, it runs without errors but electron isn't showing up.

Code is available here: https://codesandbox.io/s/927j4kzw6w

Run the project with: npm run dev:electron

Although everything looks fine when I run locally at http://localhost:3000/, the app that is built with Electron is just a blank white screen. I feel like I'm missing something obvious here!

Stumbled upon this article on how the Zeit team integrated Nex with Electron:
https://leo.im/2017/electron-next

One consideration they mention is not to open a port in production due to security vulnerabilities:

The reason why electron-next doesn't have the same behaviour in the final app as in development is that opening a port (like Next.js does it for providing hot reloading and auto-building of your code) is generally not a good idea because it introduces a security vulnerability on the user's device.

It's therefore safe for development, but not for production.

What's much safer, however, is letting the BrowserWindow instances directly access the static files of your renderer. This is made possible by next export, a new sub command that we've introduced with Next.js 3

I'm guessing next export is equivalent to running nuxt in --spa mode. So perhaps similar considerations can be applied to this template

cc @Atinux

After understanding the nuxt starter template, this template and electron-quick-start template, I managed to put together a new template for vue-cli: https://github.com/HoraceKeung/nuxtron

Since there are differences compare to this template, for example the repo structure is so different since it is a template for creating new project via vue-cli and electron-builder is used by default to build the app, it may not a be a good idea to submit a pull request here. Any idea?

Today to use this repository it is necessary to make a clone, why not add it to vue-cli so that users can only start it with vue init nuxt-community/electron-template <folder>, there is some restriction so you have not done so?

If it is the case I can send a PR with the changes

Create a new, empty project, cd into the project, and run npm i.

At the end you'll see:

[server error] Cannot load the stats for nuxtjs – please try again later

in nuxt.config.js
i changed to
css: [
'@/assets/css/global.scss'
]
and it throws error

15888:0918/113806.973:ERROR:CONSOLE(7574)] "Extension server error: Object not found: ", source: chrome-devtools://devtools/bundled/inspector.js (7574)
ERROR Failed to compile with 1 errors11:38:07

This dependency was not found:

• ..\assets\css\global.scss in ./.nuxt/App.js

To install it, you can run: npm install --save ..\assets\css\global.scss

in normal nuxt structure i can easly add scss like this but in electron template i can't add it ... i have to add css not scss