michalzaq12 / electron-nuxt

⚡ An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools

Overview

The boilerplate for making electron applications built with vue / nuxt.

Things you'll find in this boilerplate:

• Auto-updating for easy development *
• ES6/ES7 compilation without any extra work *
• Typescript support [WIP](only in renderer process for now)
• Parallel code compilation
• Installed latest vue-devtools
• Ability to easily package your electron app using electron-builder
• GitHub Action for releasing cross-platform apps (>1.6.0)
• Configured ESLint (standard code style) with support for typescript linting**
• Built-in support for CSS pre-processor: **
  • Sass (scss)
  • LESS
  • Stylus
• Pre-installed UI components framework: **
  • Buefy
  • Vuetify
  • Element
• Pre-installed icon set for offline usage: **
  • Font Awesome 5
  • Material Design Icon

* available in renderer and main process
** customizable during vue-cli scaffolding

Getting Started

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init michalzaq12/electron-nuxt <project-name>

# Install dependencies and run your app
cd <project-name>
yarn install
yarn dev 

Take a look at the documentation. Here you will find useful information about configuration, project structure, and building your app

Sponsors

Electron-nuxt is an MIT licensed open source project and completely free to use. However, if you run a business and are using Electron-nuxt in a revenue-generating product, it makes business sense to sponsor project development.

Made with electron-nuxt

• NKNxVault: NKN desktop wallet (https://github.com/rule110-io/vault)
• Reflex: Responsive web browser for developers (https://github.com/nwittwer/reflex)
• BinaryBotPlayground: An Electron app for loading and running Binary bots (https://github.com/gabriellanzer/BinaryBotPlayground)
• system-companion: Multi platform app for getting system information (https://github.com/romslf/system-companion)
• NSMultiTools: Graphical interface to make life easier for Nintendo Switch hackers (https://github.com/MeatReed/NSMultiTools)
• blue-burlap: CI/CD For Salesforce Deployments (https://github.com/fuzzybaird/blue-burlap)
• cuesync: Synchronize cues between Algoriddim Djay, Serato DJ Lite/Pro and Virtual DJ (https://github.com/schneefux/cuesync)
• VKGram: Messenger for VK that allows you to send custom stickers (https://github.com/PurpleHorrorRus/VKGram)
• twitch-vip-controller: An app to help Twitch streamers automate VIP redemption and removal (https://github.com/kisuka/twitch-vip-controller)
• Keyanu: Keyboard shortcut manager (https://github.com/pcktm/Keyanu)
• JCloisterZone: PC implementation of Carcassonne board game (https://github.com/farin/JCloisterZone-Client)
• StreamOverlay: An overlay for streamers with single display (https://github.com/PurpleHorrorRus/StreamOverlay)
• screencast: Global Press Overlay of Keyboard and Mouse like VSCode Screencast (https://github.com/seonglae/screencast)
• Enab App: Enab System - Manage Businesses & Connecting Them! (https://github.com/itourstory/EnabApp)
• EARND: Personal Finance Manager (https://github.com/sanespi09/EARND-NUXT)
• Intuiter: Global productivity app for anyone who use Windows (https://github.com/seonglae/intuiter)
• Infrontier: Simple AWS S3 client (https://github.com/DiscreteTom/Infrontier)

electron-nuxt's Issues

Instructions for adding electron-nuxt to existing nuxt project?

Hi Michal, this is awesome, I wonder if there are instructions for adding electron-nuxt to existing nuxt project that we can follow?

Probleme with static folder

SyntaxError during npm run dev/build

npm run dev/build logs SyntaxError in console, but I'm not sure if it affects app in any way. Template code seems to be running as it should. Tried different settings when initializing template, but it doesn't seem to be related to any of them.
System: Windows 7 x64

λ npm run dev

> [email protected] dev D:\code\electron-nuxt-test
> cross-env-shell NODE_ENV=development node .electron-nuxt/index.js

         | Electron-nuxt: starting development env...{ SyntaxError: Unexpected token (2:67)
    at Parser.pp$4.raise (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2828:15)
    at Parser.pp.unexpected (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:689:10)
    at Parser.pp.expect (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:683:28)
    at Parser.pp$3.parseParenAndDistinguishExpression (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2313:38)
    at Parser.pp$3.parseExprAtom (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2232:43)
    at Parser.pp$3.parseExprSubscripts (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2091:21)
    at Parser.pp$3.parseMaybeUnary (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2068:19)
    at Parser.pp$3.parseExprOps (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:2012:21)
    at Parser.pp$3.parseMaybeConditional (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:1995:21)
    at Parser.pp$3.parseMaybeAssign (D:\code\electron-nuxt-test\node_modules\acorn\dist\acorn.js:1970:21) pos: 69, loc: Position { line: 2, column: 67 }, raisedAt: 70 }

  Main
│  Hash: d307f8a232d30f53ff0f
│  Version: webpack 4.35.3
│  Time: 892ms
│  Built at: 2019-07-16 15:56:06
│     Asset      Size  Chunks             Chunk Names
│  index.js  63.4 KiB    main  [emitted]  main
│  Entrypoint main = index.js
│  [./.electron-nuxt/config.js] 644 bytes {main} [built]
│  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
│  [./node_modules/electron-debug/index.js] 2.67 KiB {main} [built]
│  [./node_modules/electron-is-accelerator/index.js] 849 bytes {main} [built]
│  [./node_modules/electron-is-dev/index.js] 281 bytes {main} [built]
│  [./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
│  [./node_modules/electron-localshortcut/node_modules/debug/src/index.js] 263 bytes {main} [built]
│  [./node_modules/keyboardevent-from-electron-accelerator/index.js] 6.04 KiB {main} [built]
│  [./node_modules/vue-devtools/lib/index.js] 1.35 KiB {main} [built]
│  [./src/main/BrowserWinHandler.js] 2.09 KiB {main} [built]
│  [./src/main/index.dev.js] 861 bytes {main} [built]
│  [./src/main/index.js] 442 bytes {main} [built]
│  [./src/main/mainWindow.js] 642 bytes {main} [built]
│  [electron] external "electron" 42 bytes {main} [built]
│  [path] external "path" 42 bytes {main} [built]
│      + 10 hidden modules
│
│  WARNING in ./node_modules/electron-debug/index.js 96:45-58
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js
│
│  WARNING in ./node_modules/electron-debug/index.js 97:61-74
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js

  Nuxt
│  i Preparing project for development
│
│  i Initial build may take a while
│
│  √ Builder initialized
│
│  √ Nuxt files generated
│
│  i Compiling Client
│
│  √ Client: Compiled successfully in 5.90s
│
│  i Waiting for file changes
│
         √ Electron-nuxt: Done

  Electron
│  Debugger l
│  istening on ws://127.0.0.1:5858/6623a9d2-a829-4ab5-a38a-8c8b12ed5647
│  For help, see: https://nodejs.org/en/docs/inspector
│
│  Installing Vue.js devtools from node_modules\vue-devtools\vender
│

Electron app crashes unexpectedly on macos Catalina

Electron app crashes unexpectedly on macos Catalina 10.15.1 (19B88)

npm run build

so run the app
Electron app crashes unexpectedly

cookie-universal-nuxt get build now working

Hello, I use the cookie-universal-nuxt library with electronjs and nuxtjs and I define it in nuxt.config.js and it works fine but it doesn't work when I package the file

How to get the data of webContents.send () on the non-index page?

Hello, when I need to initialize, use the browserWindow.webContents.send () function in the rendering process to send data to a nuxt page (non-index page). How can I get it on the page?
(Currently, I can only get data on the index.vue page)
Any help is much appreciated.

"404 Not Found" on first installation

I just did the vue init but I'm unable to try it
In my console, I see Nuxt showing that WARN Address localhost:9080 is already in use.

Is it possible to fix this?

Fastify support

Is it possible to combine Nuxt + Fastify within Electron?
I have project which was developed with Nuxt (frontend) and Fastify (API), now I want to combine them all in an Electron app so users can just run it.

Electron v9

Is there any plan to support Electron v9 in the near future ?

Add script build:clean

Add a script in package.json to delete/clean build files.

"scripts": {
  "build:clean": "cross-env-shell BUILD_TARGET=clean node .electron-nuxt/index.js",
}

Build Extend Question

I'm trying to add a runtime vue compiler and when I modify the build.extend function to do so, it seems not to apply the change.

...src/renderer/nuxt.config.js

This is my code
build: { extend (config) { config.resolve.alias['vue'] = 'vue/dist/vue.common' } },

I followed precisely the guide here: https://stackoverflow.com/questions/52706863/dynamically-fetch-and-compile-a-template-with-nuxt.
But when I run the application, I get an error that I would expect if the runtime compiler wasn't added:

Am I doing anything wrong?

(node:2065) UnhandledPromiseRejectionWarning: Error: getaddrinfo ENOTFOUND on development startup.

This is 100% on my side, but i have no idea how to fix it.

When I run yarn run dev I get this error after nuxt compiles.

│  (node:2065) UnhandledPromiseRejectionWarning: Error: getaddrinfo ENOTFOUND mba-internal
│      at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:64:26)
│  (node:2065) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)
│  (node:2065) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any recommendations?

Tailwind Css

Pre-installed UI components framework please add Tailwind Css.

[Suggestion] Source map for renderer process

Since template trying to cover quite a bit already it seems like a good feature to have enabled by default.
I've got it working with code below, but unsure if its the best approach

module.exports = {
  ...
  build: {
    extend (config, { isClient }) {
      if (isClient) {
        config.devtool = '#source-map'
      }
    }
  }
}

When installing the author does not get updated as written when building

This should probably be or the one written or an array of multiple authors https://github.com/michalzaq12/electron-nuxt/blob/master/template/package-template.hbs#L25

Reload Loop

Started a new project with this template when I run npm run dev, the application reloads the page over and over until I kill the process.

Not Generating static Pages

I have added vue files on the PAGES, but when generating (building env) there is only index.html in dist/renderer . there are no static files generated from the vue files i added in pages

because of that i cant load windows from file in the production. how to solve this

Update to Vue Cli 3

Just wondering if would take much changes to update the vue cli from the v2 to v3 in this project, being this a recent one and would prevent installing more packages in the machine.

auto relauching electron when updating codes, old electron instance not exit

no comment

nuxt.config.js __resources is undefined.

I need to access the __resources variable in the nuxt config file but when I run the dev command, it keeps on saying __resources is undefined.

Add DevTron to help in Development

Maybe add DevTron to help debugging and development

__resources is undefined in vuex store

It looks like it's being set from resources-plugin.js which is loaded after vuex.
How can I access "__resources" from vuex module files?

edit: to clarify, my usecase is to have a sound play every time store action is performed. It should work across all pages, so store seemed like the right place.

store/index.js

import { Howl } from 'howler'

const notificationSound = new Howl({
  src: [`${__resources}/sound16.mp3`], //this line throws error
  loop: false
})

export const actions = {
  ...
  async fetchNewResults ({ commit }) {
    const results = await APICall()
    commit('addResults', results)
    notificationSound.play()
  }
}

If I should not be using resources folder this way, please lmk how to do it properly.

cross platform compling

how can I build windows version at macos with electron-nuxt? I'm a new electron user, thanks for your help.

Received Type Error when running Built application.

I can run the application fine in dev mode. But when i package the app and run it, I get a type error. TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type number

Here is my nuxt.config.js file

/**
 * By default, Nuxt.js is configured to cover most use cases.
 * This default configuration can be overwritten in this file
 * @link {https://nuxtjs.org/guide/configuration/}
 */

const colors = require('vuetify/es5/util/colors').default;

module.exports = {
	mode: 'spa', // or 'universal'
	head: {
		title: 'Furcord',
	},
	loading: false,
	plugins: [],
	buildModules: ['@nuxt/typescript-build', '@nuxtjs/vuetify'],
	modules: ['@nuxtjs/axios', '@nuxtjs/firebase', '@nuxtjs/apollo', 'nuxt-i18n'],
	vuetify: {
		theme: {
			dark: true,
			themes: {
				dark: {
					primary: colors.blue.darken2,
					accent: colors.grey.darken3,
					secondary: colors.amber.darken3,
					info: colors.teal.lighten1,
					warning: colors.amber.base,
					error: colors.deepOrange.accent4,
					success: colors.green.accent3,
				},
			},
		},
	},
	axios: {},
	firebase: {
		config: {
			production: {},
			development: {},
		},
		services: {
			auth: {
				persistance: 'local',
			},
			firestore: true,
			functions: false,
			storage: true,
			realtimeDb: false,
			messaging: false,
			performance: true,
			analytics: true,
			remoteConfig: false,
		},
	},
	apollo: {
		clientConfigs: {
			default: {
				httpEndpoint: 'http://localhost:4000',
				browserHttpEndpoint: '/graphql',
				httpLinkOptions: {
					credentials: 'same-origin',
				},
			},
		},
	},
	i18n: {
		locales: [
			{ code: 'en', file: 'en.js', name: 'English' },
		],
		defaultLocale: 'en',
		strategy: 'no_prefix',
		lazy: true,
		langDir: '../resources/locales/',
		detectBrowserLanguage: false,
	},
};

and my builder.config.js file

const ICONS_DIR = 'build/icons/';

const windowsOS = {
	win: {
		icon: ICONS_DIR + 'win-icon.ico',
		publisherName: 'Furcord',
		target: 'nsis',
	},

	nsis: {
		differentialPackage: true,
	},
};

module.exports = {
	asar: true,
	productName: 'Furcord',
	appId: 'com.furcordapp.www',
	copyright: 'Copyright © 2020 Furcord',
	directories: {
		output: 'build',
	},
	files: [
		'package.json',
		{
			from: 'dist/main/',
			to: 'dist/main/',
		},
		{
			from: 'dist/renderer',
			to: 'dist/renderer/',
		},
		{
			from: 'src/resources/',
			to: 'dist/resources/',
		},
	],
	...windowsOS,
};

And I only have 2 vue files in my project at the moment. One in src/renderer/layouts/default.vue and src/rederer/pages/index.vue

default.vue

<template>
	<v-app dark>
		<v-content>
			<v-container>
				<nuxt />
			</v-container>
		</v-content>
	</v-app>
</template>

<script>
export default {};
</script>

index.vue

<template>
	<h1>{{ this.$i18n.t("hello") }}</h1>
</template>

<script lang="ts">
	import Vue from 'vue';
	export default Vue.extend({
		name: 'Index',
	});
</script>

<style></style>

I have no clue what is causing the error. Can someone help? Thanks

Electron+nuxt+amCharts 4: Unexpected token export

I want to code a desktop application using Electron, nuxt.js and am4charts. When importing the am4charts core with

import * as am4core from '@amcharts/amcharts4/core'

the app returns an error:

`export { System, system } from "./.internal/core/System";
^^^^^^

SyntaxError: Unexpected token export`

My setup:

• latest version of @electron-nuxt
• "@amcharts/amcharts4": "^4.7.1"

I already tried to transpile amCharts in nuxt.config.js using

build: { transpile: [ '@amcharts/amcharts4' ], vendor: ['v-tooltip'] }

but without success. How can I fix this issue?

throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')

ningjinpengdeMacBook-Pro:electron-nuxt ningjinpeng$ yarn install
yarn install v1.22.0
$ node .electron-nuxt/check-engines.js
[1/5] 🔍 Validating package.json...
[2/5] 🔍 Resolving packages...
success Already up-to-date.
$ electron-builder install-app-deps
• electron-builder version=22.6.0
✨ Done in 1.32s.
ningjinpengdeMacBook-Pro:electron-nuxt ningjinpeng$ yarn run dev
yarn run v1.22.0
$ node .electron-nuxt/dev.js
/Users/ningjinpeng/Desktop/GitOSChina/bytedeskpc/electron-nuxt/node_modules/electron/index.js:14
throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again')
^

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
at getElectronPath (/Users/ningjinpeng/Desktop/GitOSChina/bytedeskpc/electron-nuxt/node_modules/electron/index.js:14:11)
at Object. (/Users/ningjinpeng/Desktop/GitOSChina/bytedeskpc/electron-nuxt/node_modules/electron/index.js:18:18)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1167:10)
at Module.load (internal/modules/cjs/loader.js:996:32)
at Function.Module._load (internal/modules/cjs/loader.js:896:14)
at Module.require (internal/modules/cjs/loader.js:1036:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (/Users/ningjinpeng/Desktop/GitOSChina/bytedeskpc/electron-nuxt/.electron-nuxt/index.js:4:18)
at Module._compile (internal/modules/cjs/loader.js:1147:30)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Vuetify is not being bootstrapped

I'm trying to start with the boilerplate but I'm having issues to bootstrap Vuetify.
I have installed the boilerplate with Vuetify and SASS. The first run is ok but if I add, for example, a <v-app-bar> to my template, I get an error message as follows:

The only thing I did was to change the header.vue and add the <v-app-bar>

Cannot read property 'provider' of null stackTrace

Just initialized project and trying to build binary using yarn build and getting error of

Cannot read property 'provider' of null stackTrace

OS: Windows 10

it also changed my CLI configurations

Render < - > Main Process Communication

A fairly common standard with Electron applications is to use IPC Renderer/IPC Main to communicate between the two processes. The main purpose of this this being security. You normally want to do any kind of file system access and the like from the main process using predefined functions and communicate over IPC.

In my case, I have files on a network share that I need to access and parse through. I also like using the main process for such tasks as I dont lock up the renderer and I can display loading screens and such without choppiness.

I am trying to figure out the best place to put my handlers. Within BrowserWinHandler.js or in mainWindow.js?

Error installing with yarn

More info here:
electron-userland/electron-builder#4668
yarnpkg/yarn#7902

Error running first time

My set up (on Ubuntu 18.04)

? Application Name merj-tools-gui
? Application Id com.merj.tools
? Application Version 0.0.1
? Project description Merj tools GUI
? Author Denys Pasishnyi <[email protected]>
? Select which ui-components framework install Vuetify
? Select which css pre-processor install Sass
? Select which icon set install Font Awesome 5
? Use typescript? No
? Use linting with ESLint? Yes
? Set up unit testing with vue-test-utils + AVA? Yes
? Set up end-to-end testing with Spectron + AVA? Yes

Output:

  Main   [11:18:43 AM]
│  Hash: af0ab962a45eca772ed4
│  Version: webpack 4.41.4
│  Time: 443ms
│  Built at: 12/30/2019 11:18:43 AM
│     Asset      Size  Chunks             Chunk Names
│  index.js  70.6 KiB    main  [emitted]  main
│  Entrypoint main = index.js
│  [./.electron-nuxt/config.js] 618 bytes {main} [built]
│  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
│  [./node_modules/electron-debug/index.js] 2.67 KiB {main} [built]
│  [./node_modules/electron-is-accelerator/index.js] 849 bytes {main} [built]
│  [./node_modules/electron-is-dev/index.js] 281 bytes {main} [built]
│  [./node_modules/electron-localshortcut/index.js] 8.78 KiB {main} [built]
│  [./node_modules/electron-localshortcut/node_modules/debug/src/index.js] 314 bytes {main} [built]
│  [./node_modules/keyboardevent-from-electron-accelerator/index.js] 6.37 KiB {main} [built]
│  [./node_modules/vue-devtools/lib/index.js] 1.42 KiB {main} [built]
│  [./src/main/BrowserWinHandler.js] 2.11 KiB {main} [built]
│  [./src/main/index.dev.js] 845 bytes {main} [built]
│  [./src/main/index.js] 735 bytes {main} [built]
│  [./src/main/mainWindow.js] 536 bytes {main} [built]
│  [electron] external "electron" 42 bytes {main} [built]
│  [path] external "path" 42 bytes {main} [built]
│      + 11 hidden modules
│  
│  WARNING in ./node_modules/electron-debug/index.js 96:45-58
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js
│  
│  WARNING in ./node_modules/electron-debug/index.js 97:61-74
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js

  Nuxt   [11:18:49 AM]
│  ℹ Preparing project for development
│  
│  ℹ Initial build may take a while
│  
│  ✔ Builder initialized
│  
│  ✔ Nuxt files generated
│  
│  ℹ Compiling Client
│  
│  ✔ Client: Compiled with some errors in 3.65s
│  
│  
│   ERROR  Failed to compile with 2 errors
│  
│  
│  These relative modules were not found:
│  
│  * ../../../node_modules/vuetify/dist/vuetify.css in ./src/renderer/.nuxt/App.js
│  
│  * ./components/nuxt-error.vue in ./src/renderer/.nuxt/index.js
│  
│  ℹ Waiting for file changes
│  
⠸ Electron-nuxt: Starting ...
✔ Electron-nuxt: All steps completed.

ℹ Electron-nuxt: Waiting for file changes ...

  Electron   [11:18:54 AM]
│  Debugger listening on ws://127.0.0.1:5858/c072c1c6-73ea-4c29-935f-411cad061449
│  For help, see: https://nodejs.org/en/docs/inspector
│  
│  Installing Vue.js devtools from node_modules/vue-devtools/vender
│  

ℹ Electron-nuxt: Killing all processes... (reason: launcher close event) 

Why Nuxt fails to compile with a fresh install?

Electron nuxt main & renderer process with vuex store?

<<TITLE>>

States between main & renderer process

Depfu Error: No dependency files found

Hello,

We've tried to activate or update your repository on Depfu and couldn't find any supported dependency files. If we were to guess, we would say that this is not actually a project Depfu supports and has probably been activated by error.

Monorepos

Please note that Depfu currently only searches for your dependency files in the root folder. We do support monorepos and non-root files, but don't auto-detect them. If that's the case with this repo, please send us a quick email with the folder you want Depfu to work on and we'll set it up right away!

How to deactivate the project

• Go to the Settings page of either your own account or the organization you've used
• Go to "Installed Integrations"
• Click the "Configure" button on the Depfu integration
• Remove this repo (michalzaq12/electron-nuxt) from the list of accessible repos.

Please note that using the "All Repositories" setting doesn't make a lot of sense with Depfu.

If you think that this is a mistake

Please let us know by sending an email to [email protected].

---

This is an automated issue by Depfu. You're getting it because someone configured Depfu to automatically update dependencies on this project.

Static resources and SetIcon

Hey there !

First, thank you for your work, it's working great :)
I have some trouble for changing my app icons when the project is built, it's running perfect in dev but failed in production. Can you point me in the right direction ?

Here is a part of my main.js :
global.__resources = 'src/resources';
window.setIcon(__resources +'/icons/default.png');
I tried with path.join() but I just can't figure it out !
Do I have to put the icons somewhere else than (src/resources/icons/) ?

Thank you for your help 😄

Electron 6

How to upgrade the template to electron 6? Did try to upgrade but nothing render, do you have some insight ?

Getting a Manifest error during npm run dev

Just starting with your solution.
I've installed the boilerplate by following the documentation you have however, when I run npm run dev, I get an annoying error message. Not sure if it'll impact any other thing later.
The application seems to be working fine but I don't see the button "Relaunch Electron", as seen on your preview image

Vuetify colors not taking effect

This is a clean install, I followed the instruction and here's my customized options outputs:

? Select which ui-components framework install Vuetify
? Select which css pre-processor install none
? Select which icon set install Material Design Icon
? Use typescript? No
? Use linting with ESLint? Yes
? Set up unit testing with vue-test-utils + AVA? No
? Set up end-to-end testing with Spectron + AVA? No

And here's how a testing icon looks like

...
<v-btn color="primary">Test button</v-btn>
...

My nuxt.config.js from boilerplate

module.exports = {
  mode: 'spa', // or 'universal'
  head: {
    title: 'client'
  },
  loading: false,
  plugins: [
    { ssr: true, src: '@/plugins/icons.js' }

  ],
  buildModules: [

  ],
  modules: [
    '@nuxtjs/vuetify'
  ],
  vuetify: {
    theme: {
      themes: {
        light: {
          primary: '#1867c0',
          secondary: '#b0bec5',
          accent: '#8c9eff',
          error: '#b71c1c'
        }
      }
    }
  }
}

Is there a way to fix this?

Can not add and use vue module.

I created new project:
vue init michalzaq12/electron-nuxt my-project

Then I added module:
yarn add tsparticles

Then I imported to pages/index.vue
import { tsParticles } from "tsparticles";

Then added mounted and added:
tsParticles.load("animated-bg", {});

Then I just run it with
yarn run dev

But it does not work. Error below occurring. What did I do wrong?

client.js?c592:83 Error: Cannot find module 'C:\Users\dd\Projects\my-project\dist\index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (internal/modules/cjs/loader.js:298)
    at Function.Module._findPath (internal/modules/cjs/loader.js:529)
    at Module._resolveFilename (internal/modules/cjs/loader.js:785)
    at Function../lib/common/reset-search-paths.ts.Module._resolveFilename (electron/js2c/renderer_init.js:754)
    at Module._load (internal/modules/cjs/loader.js:691)
    at Module._load (electron/js2c/asar.js:717)
    at Function.Module._load (electron/js2c/asar.js:717)
    at Module.require (internal/modules/cjs/loader.js:853)
    at require (internal/modules/cjs/helpers.js:74)
    at eval (external "tsparticles"?5caf:1)

Please help me. Thank you.

nuxt.config.js (base) override nuxt.config.js (user)

if src/renderer/nuxt.config.js contains a router property, it will be overwriten by .electron-nuxt/renderer/nuxt.config.js

// nuxt.config.js (userNuxtConfig)

module.exports = {
  mode: 'spa', // or 'universal'
  router: {
    middleware: [
      'user-agent', 'check-auth'
    ]
  },
  ...

// nuxt.config.js (NuxtConfig) from .electron-nuxt/renderer/

module.exports = {
  ...userNuxtConfig,
  srcDir: RENDERER_PROCESS_DIR,
  rootDir: RENDERER_PROCESS_DIR,
  router: {
    mode: 'hash'
  },
  ....

Result:

module.exports = {
  srcDir: RENDERER_PROCESS_DIR,
  rootDir: RENDERER_PROCESS_DIR,
  router: {
    mode: 'hash'
  },
  ....

Expected Result:

module.exports = {
  srcDir: RENDERER_PROCESS_DIR,
  rootDir: RENDERER_PROCESS_DIR,
  router: {
    mode: 'hash',
    middleware: [
      'user-agent', 'check-auth'
    ]
  },
  ....

How to send messagess from to ipcMain

I need to send messages to ipcMain from my Nuxt component. If I import { remote } from 'electron'
I do not have ipcRenderer property on remote, although I do have access to ipcMain.

I am following these docs https://www.electronjs.org/docs/api/ipc-main#sending-messages

How do I access ipcRenderer?

Thanks

ts error

Yarn requirement after npm install

Hi,
I get this error after npm install

However after installing yarn stable version i get into this after retrying the npm install

Sorry if i posted the issue on the wrong project, it seems more related to this vue-devtools.
I managed to make it work by installing without scripts npm install --no-scripts and after npm install electron

PS: When i vue init this template a month ago i didn't have any of these issues, but i think i was running the command from wsl bash

Make the project multi-platform buildable

Hi,

We cannot build this project using wine or CircleCI. It's very impractical to always have to be building on your host-OS based on the current configuration. Can you improve the building process for CI/CD?

Thanks

Access to static resources once build is done.

Hey there,

Still struggling with the resources path. When I build my project, the path is the absolute path of my building machine.

window.setIcon(__resources +'/icons/default.png');
Is there something I'm missing ? How can I store some png in the resources folder and then use the resources built in the 'win-unpacked' folder ? (I need these unpacked sources).

Thank you :)

Failed to run npm run dev

I created a project using the following settings:

? Select which css framework install none
? Select which css pre-processor install Sass
? Select with icon set install Font Awesome 5
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with vue-test-utils + AVA? Yes
? Set up end-to-end testing with Spectron + AVA? Yes

The install worked perfectly, however when running

npm run dev

The script failed with the following output:

> [email protected] dev /home/brenden/Documents/projects/snapvolt
> cross-env-shell NODE_ENV=development node .electron-nuxt/index.js


  Main  
│  Hash: a54900bab19212206924
│  Version: webpack 4.35.0
│  Time: 807ms
│  Built at: 06/25/2019 9:10:57 AM
│     Asset      Size  Chunks             Chunk Names
│  index.js  63.4 KiB    main  [emitted]  main
│  Entrypoint main = index.js
│  [./.electron-nuxt/config.js] 597 bytes {main} [built]
│  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
│  [./node_modules/electron-debug/index.js] 2.92 KiB {main} [built]
│  [./node_modules/electron-is-accelerator/index.js] 849 bytes {main} [built]
│  [./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
│  [./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
│  [./node_modules/electron-localshortcut/node_modules/debug/src/index.js] 263 bytes {main} [built]
│  [./node_modules/keyboardevent-from-electron-accelerator/index.js] 6.04 KiB {main} [built]
│  [./node_modules/vue-devtools/lib/index.js] 1.35 KiB {main} [built]
│  [./src/main/BrowserWinHandler.js] 1.98 KiB {main} [built]
│  [./src/main/index.dev.js] 969 bytes {main} [built]
│  [./src/main/index.js] 638 bytes {main} [built]
│  [./src/main/mainWindow.js] 498 bytes {main} [built]
│  [electron] external "electron" 42 bytes {main} [built]
│  [path] external "path" 42 bytes {main} [built]
│      + 10 hidden modules
│  
│  WARNING in ./node_modules/electron-debug/index.js 101:45-58
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js
│  
│  WARNING in ./node_modules/electron-debug/index.js 102:61-74
│  Critical dependency: the request of a dependency is an expression
│   @ ./src/main/index.dev.js

  Nuxt  
│  ℹ Preparing project for development
│  
│  ℹ Initial build may take a while
│  
│  ✔ Builder initialized
│  
│  ✔ Nuxt files generated
│  
         ✖ Electron-nuxt: [object Object]
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `cross-env-shell NODE_ENV=development node .electron-nuxt/index.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/brenden/.npm/_logs/2019-06-25T15_10_59_094Z-debug.log

The content of the debug log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 info lifecycle [email protected]~dev: [email protected]
7 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/brenden/Documents/projects/snapvolt/node_modules/.bin:/home/brenden/.sdkman/candidates/kotlin/current/bin:/home/brenden/.sdkman/candidates/gradle/current/bin:/usr/local/pgsql/bin:/home/brenden/.local/bin:/home/brenden/bin:/usr/local/bin:/home/brenden/.local/kitty.app/bin:/home/brenden/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/brenden/Programs/java/jre1.8.0_211/bin:/home/brenden/Programs/jdk1.8.0_211
9 verbose lifecycle [email protected]~dev: CWD: /home/brenden/Documents/projects/snapvolt
10 silly lifecycle [email protected]~dev: Args: [ '-c',
10 silly lifecycle   'cross-env-shell NODE_ENV=development node .electron-nuxt/index.js' ]
11 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
12 info lifecycle [email protected]~dev: Failed to exec dev script
13 verbose stack Error: [email protected] dev: `cross-env-shell NODE_ENV=development node .electron-nuxt/index.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/brenden/Documents/projects/snapvolt
16 verbose Linux 4.18.0-22-generic
17 verbose argv "/usr/bin/node" "/usr/local/bin/npm" "run" "dev"
18 verbose node v8.11.4
19 verbose npm  v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] dev: `cross-env-shell NODE_ENV=development node .electron-nuxt/index.js`
22 error Exit status 1
23 error Failed at the [email protected] dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Buefy customization

So i need to change some buefy components.
how should i do it?

Bootstrap-Vue Error Avoid mutating

Follow the instructions from: https://bootstrap-vue.org/docs#aliasing-vue-import
Set up an alias to 'vue' in your bundler config
resolve: { alias: { vue$: 'vue/dist/vue.esm.js' } }
in .electron-nuxt/renderer/nuxt.config.js or /src/renderer/nuxt.config.js not working

How to navigate to a new page with a custom protocol?

I know this may be a newbie question, but how exactly do i navigate to for example: home.vue etc.?

Update to electron 7.0?

I've noticed that electron-nuxt is still using electron 5.0 therefore chrome 73, electron 7.0 released days ago and it features newer versions of chrome 78
Would like to see it here!

Can not build mac, linux app on windows