Skip to content
⚡ An Electron & Nuxt.js / Vue.js quick start boilerplate with vue-cli scaffolding, electron-builder, unit/e2e testing, vue-devtools
JavaScript Vue HTML Shell
Branch: master
Clone or download
michalzaq12 Merge pull request #49 from michalzaq12/dependabot/npm_and_yarn/templ…
…ate/buefy-tw-0.8.1

Update buefy requirement from ^0.7.7 to ^0.8.1 in /template
Latest commit bb83acc Aug 2, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs/images update README Jun 18, 2019
template
tests update travis config for linux os Jul 22, 2019
.editorconfig
.eslintignore update renamed file path Jul 9, 2019
.eslintrc.js Fix eslint config, deps, mixed indents and use 2 spaces Jul 7, 2019
.gitattributes Fix eslint config, deps, mixed indents and use 2 spaces Jul 7, 2019
.gitignore Fix eslint config, deps, mixed indents and use 2 spaces Jul 7, 2019
.travis.yml update travis config for linux os Jul 22, 2019
LICENSE Initial commit Jun 3, 2019
README.md update README Jul 11, 2019
hbs-helpers.js update renamed file path Jul 9, 2019
meta.js update renamed file path Jul 9, 2019
package-lock.json Bump eslint from 6.0.1 to 6.1.0 Jul 22, 2019
package.json Bump eslint from 6.0.1 to 6.1.0 Jul 22, 2019

README.md


electron-nuxt

Windows Build status Linux Build status OSX Build status

JavaScript Style Guide Code quality

Template version


Overview

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

Things you'll find in this boilerplate:

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

Getting Started

This boilerplate was built as a template for vue-cli v2 and includes options to customize your final scaffolded app.

Scaffolding

npm install -g vue-cli
vue init michalzaq12/electron-nuxt <project-name>

If you already have installed vue-cli >= 3, you will need to install global bridge (since version 3.0 vue-cli package name has changed from vue-cli to @vue/cli):

npm install -g @vue/cli-init

vue init now works exactly the same as vue-cli@2.x

cd <project-name>
npm install

Available commands

  • Run app in development

    Preview electron-nuxt-in-development
npm run dev
  • Build your app for production
npm run build

Documentation

Renderer process

Application structure

Same as default Nuxt.js application structure, but without Static Directory. If you don't want to use Webpack assets from the assets directory read section static resources and resolving paths in HTML.

Routing

Nuxt.js automatically generates the vue-router configuration based on your file tree of Vue files inside the src/renderer/pages directory.

Read more

Main process

Entry point: main/index.js

BrowserWinHandler is helper class, which wrap BrowserWindow to make it more self-manageable. This solution facilitates communication between the windows and doesn't require a window manager.

Resolving paths in HTML

If you would like to set the src of an <img> to the path of an image, you must use ~/assets Webpack alias or provide absolute path with protocol (required on Linux and Mac to proper work in development environment).

Examples:

  • <img src="~/assets/image.png" />
  • <img src="file:///home/User/image.png" />
  • <script :src="`file:///${__resources}/ex_script.js`" />

Static resources

Electron-nuxt provides a global variable named __resources that will yield a proper path to the src/resources in renderer and main process. In this directory you can store all necessary resources with reliable path to them, but you must treat all assets in this directory as read only. (If you need also write access use app.getPath('appData') instead of __resources).

Use case:

Building notes

Electron-nuxt support electron-builder to build and distribute your production ready application. Further customization can be made in builder.config.js file.

dependencies vs devDependencies

Due to electron-builder the distinction between dependencies and devDependencies is very important. Incorrect assignment can cause the package to grow by several MB, the build time also increases.

Brief advice: Try to avoid adding a package to dependencies.

Explanation

If your package uses some modules only for build, test, or bundles them into a dist file (i.e. what will be used by the consumer project), then those modules should not be mentioned in dependencies. We still list them in devDependencies for development. ~ghybs

  • packages mentioned in dependencies are packed into production build with all sub-dependencies (this behavior can`t be configured).

  • packages mentioned in devDependencies aren`t packed into production build.

In conclusion, we need to pack the necessary dependencies to production build, but without unneeded sub-packages, dead code, development tools and for example stylus files (we can compile them to css). To do this we use Webpack, which produce dist files (our entire application) and only these files will be copied (files are explicitly specified in builder-config.js) to production build.

Some dependencies use case

  • node native addon
  • package that contains files that can`t or should not be bundled by webpack (eg. binary data, images, some already minified scripts)

__dirname and __filename

Global variables __dirname and __filename are no longer reliable on production build. If you need reliable path to static assets read more about: static resources.

Testing

Electron-nuxt supports both unit testing and end-to-end testing for the renderer process. During vue-cli scaffolding you will have the option to include testing support.

end-to-end

Running: npm run test:e2e

Electron-nuxt makes use of Spectron for end-to-end testing. Spectron is the official electron testing framework that uses both ChromeDriver and WebDriverIO v4 for manipulating DOM elements.

Spectron app properties:

  • [...]
  • client: WebdriverIO's browser object (WebDriver v4 doc)
  • electron: alias for require('electron') from within your app (Electron API doc)
  • browserWindow: access to the current BrowserWindow
  • nuxt: electron-nuxt provides some helper methods:
    • .ready() : Promise<void>: resolve promise when nuxt app is ready
    • .navigate(path: string) : Promise<void>: navigate to page. Throw error when page (for provided path) doesn't exist.

See also: electron-nuxt test specs


Common issues

  • Vue devtools doesn't respond: relaunch electron (from app menu or Command/Control+E)
You can’t perform that action at this time.