Skip to content
NW.js, Vue-CLI 4, Vue-DevTools
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public Update NW.js Sep 16, 2019
src Add File System Example Oct 29, 2019
tests Update dependencies and bump Nov 12, 2019
.browserslistrc
.editorconfig Mostly set up Jul 8, 2019
.eslintrc.js Simplify eslint Oct 29, 2019
.gitignore
.travis.yml Set up travis Oct 29, 2019
CODE_OF_CONDUCT.md Rename CODE_OF_CONDUCT to CODE_OF_CONDUCT.md Oct 30, 2019
LICENSE Initial commit Jul 7, 2019
README.md Markdown formatting Nov 7, 2019
babel.config.js Mostly set up Jul 8, 2019
jest.config.js Testing Sep 16, 2019
nightwatch.conf.js Mostly set up Jul 8, 2019
nightwatch.json Mostly set up Jul 8, 2019
package-lock.json Update dependencies and bump Nov 12, 2019
package.json
postcss.config.js Mostly set up Jul 8, 2019
screenshot.png Mostly set up Jul 8, 2019
server.js
vue.config.js Mostly set up Jul 8, 2019

README.md

nw-vue-cli-example

Build Status

NW.js + Vue-CLI 4 example

A screenshot of the default app running on Windows

  • NW.js
  • Vue-CLI 4
  • Vue 2.6
  • Vue-DevTools (latest)
  • Babel
  • ESLint
  • Jest (100% test coverage)

Why not include Vue-Router or Vuex?

Those are both very easily added from the Vue-CLI. There is also no custom styling libraries (Bulma, Bootstrap, etc), or meta-languages (Sass, TS, Pug, etc), or component libraries (Vuetify, Inkline, etc). This is repo is meant to be the "go to" option for building all desktop apps with Vue. So it avoids pushing any particular choices on to you. With the exception of testing being set up for Jest, and Linting being set up to ensure minumum quality of this boilerplate repo itself. Both of which can be easily modified, ignored, or removed.

Running Locally for development

  1. npm install
  2. npm start
  3. An empty window will pop up while Webpack warm ups
  4. Once Webpack is running, refresh the window and you're golden

Building for distribution

  1. npm run build:clean will delete your ./dist and ./dist-vue folders
  2. npm run build:vue will build just your Vue app for distribution (./dist-vue)
  3. npm run build:nw will build just your NW.js app (./dist)
  4. npm run build is your all-in-one command. It will clean out the old dist folders and build your Vue and NW.js app

IMPORTANT NOTE ABOUT BUILDS!!!

They take a long time. If you do npm run build expect it to take 10-30 minutes. This can be adjusted by changing the build params in the package.json. The more platforms and build types, the longer it takes. You can also remove the --concurrent from the build:nw script to see a status of what has been completed. This will allow individual pieces to finish faster, but the entire build will take longer.

Automated quality enforcment

  1. Linting: npm run lint - Uses rules in ./eslint.json
  2. Unit tests: npm run test:unit - Jest.
  3. End-to-end: npm run test:e2e - Accepting PR to make tests run in NW.js. - Nightwatch.

Customize configuration

Want Vue-Router? Vuex? Use the Vue-CLI to add them:


Updating Vue-DevTools

To update your version of Vue-DevTools run npm run update:vue-devtools.

This will download the source code for the latest version of Vue-DevTools and do a custom build for NW.js. This ensures you always have the latest version.


Alternatives

  • nwjs-vue - Uses Vue-CLI 2
  • vue-desktop-basic - Does not use a build system at all, all .vue files run directly in the browser context

Maintainence of this repo

This is not for those using this repo, but for those maintaining it.

  1. When updating the version of NW.js devDependency, also update these:
    • tests/unit/setup.js
    • tests/unit/components/__snapshots__/HelloWorld.test.js.snap
    • .browserslistrc
  2. Run npm run regression after updating dependencies or other major changes to verify builds still work correctly
You can’t perform that action at this time.