• Stars
    star
    104
  • Rank 330,604 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 5 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

NW.js, Vue-CLI 4, Vue-DevTools

nw-vue-cli-example


This project is outdated, use the new repo:

Vue-CLI is an abstraction for WebPack, but the Vue community is now only supporting Vite going forward. The new repo has all of the features this repo had, except with a slightly newer tech stack.


Build Status

  • 1.x releases use: Vue 2 + NW.js latest + Vue-CLI 5
  • 2.x releases use: Vue 3 + NW.js latest + Vue-CLI latest

A screenshot of the default app running on Windows

Comes with:

  • NW.js 0.62.2
    • Chrome 99
    • Node 17.7.2
  • Vue-CLI 5.0.4
  • Vue 2.6.14
  • Vue-DevTools (latest)
  • Babel
  • ESLint
    • Vue Linting
    • A11Y Linting
    • Jest Linting
    • Import Linting
  • Jest (100% test coverage)
  • Jest Serializer Vue (TJW)

Does this work for web or just desktop?

Both. This repo will build both for web and desktop and includes a simple this.isDesktop flag so you can add Desktop specific features that won't show on the web. This repo has 100% test coverage including tests for both web and desktop builds. You could even theoretically add NativeScript-Vue into the mix and build for native mobile as well (though that is not set up in this repo).

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 repo is meant to be the "go to" option for building all desktop apps using 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.

If you want to load the app with a splash screen, check the nw-splasher branch.

Documentation

In all .vue components, you have access to nw, global, process, require, and the boolean isDesktop:

methods: {
  example: function () {
    if (this.isDesktop) {
      console.log('Your OS is ' + this.process.platform);
      console.log('Your AppData location is ' + this.nw.App.dataPath);
      // Sets a value on Node's global, meaning other windows have access to this data.
      this.global.cow = 'moo';
      // The contents of the current directory
      console.log(this.require('fs').readdirSync('.'));
    }
  }
}

Or even directly from the template (with some slight changes to work within the Vue context):

<div v-if="isDesktop">
  Your OS is {{ process.platform }}.
  Your AppData location is {{ nw.App.dataPath }}.
  <button @click="nw.global.cow = 'moo'">
    Clicking this button sets a value on Node's global.
    Meaning other windows have access to this data.
  </button>
  The contents of the current directory are {{ nw.require('fs').readdirSync('.') }}.
</div>

Running Locally for development

  1. npm install
  2. npm start
  3. Once Webpack finishes starting up your app will appear in a window

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:
    • package.json devDeps, build nwVersion
    • tests/unit/setup.js
    • tests/unit/components/__snapshots__/HelloWorld.test.js.snap
    • .browserslistrc
  2. Update the version numbers at the top of the README
  3. Bump the version number, and all the npm scripts that reference the version number
  4. Run npm run regression after updating dependencies or other major changes to verify builds still work correctly

More Repositories

1

nw-sample-apps

Sample Apps
JavaScript
1,945
star
2

nw-builder

Build NW.js applications for Linux, MacOS and Windows
JavaScript
1,683
star
3

Web2Executable

Uses NW.js to generate "native" apps for already existing web apps.
Python
900
star
4

nw-updater

Update NW.js applications.
JavaScript
474
star
5

nwjs-shell-builder

NW.js (node-webkit) shell script builder and packager scripts
Shell
82
star
6

nw-vue3-boilerplate

NW.js + Vue 3 + Vite + Pinia + Vue-Router + Vitest
JavaScript
58
star
7

create-desktop-shortcuts

Easy API to create desktop shortcuts with Node
JavaScript
47
star
8

nw-dev

A drop-in library for nw.js development
32
star
9

nw-angular-example

An example of integrating Angular with NW.js
TypeScript
27
star
10

nw-local-server-example

An example of using a local webserver in NW.js
HTML
22
star
11

nwjs-packager

Build your NW.js app and generate archives, packages, setup files and more!
JavaScript
19
star
12

nw-vue-devtools

devDependency to add Vue-DevTools into NW.js
JavaScript
14
star
13

find-in-nw

Adds "Ctrl+F" find box to highlight text in the DOM
HTML
13
star
14

nwjs-print-server

Websocket server to interface a website with a printer
JavaScript
11
star
15

nw-tray-example

Example tray app in NW.js
JavaScript
10
star
16

nw-splash-screen-example

Show splash screen until main application loads.
HTML
9
star
17

nw-img-vue

Caches copies of online images locally and loads them first if available
Vue
9
star
18

nw-splasher

Small library to show a splash screen until main application loads.
JavaScript
9
star
19

window-communication-example

Example of communication between windows in NW.js
HTML
7
star
20

nw-electron-adapter

An adapter for Electron's API inside NW.js
JavaScript
6
star
21

nwdc

NW.js debug console for Windows
JavaScript
6
star
22

node-default-application-protocol

A cross-platform, Node tool for setting a custom URI protocol handler on an OS
JavaScript
6
star
23

get-windows-shortcut-properties

A Node.js library to get the properties of a Windows .lnk or .url shortcut file
JavaScript
6
star
24

nw-programmatic-folder-select

Programmatically open a native "Folder select" dialog
JavaScript
5
star
25

nwutils.github.io

NW Utils website
Vue
4
star
26

frameless-example

NW.js frameless window example
HTML
4
star
27

electron-to-nwjs

Build an Electron app as a NW.js app
JavaScript
4
star
28

nw-utils-builder

WIP: Do not use | Experimental NW.js build tool
JavaScript
4
star
29

SnowPack-nw

Boilerplate for start multi desktop App development using SnowPack
CSS
4
star
30

nw-bg-script-example

A demo of how JavaScript runs in NW.js
HTML
4
star
31

nw-global-installer

NW.js global install tool (WIP)
4
star
32

nw-jquery-example

An example of integrating JQuery with NW.js
JavaScript
4
star
33

nw-splasher-auto-update

WIP: A tool to automate checking for updates and downloading newer versions
JavaScript
3
star
34

nw-utils

Utilities and helper functions for NW.js
JavaScript
3
star
35

nw-utils-settings

WIP: Utility for Saving/Loading app settings
2
star
36

nw-selenium-python-example

An example of using Selenium for end-to-end testing of NW.js apps via Python
Python
2
star
37

nw-dev-keybindings

Open dev tools and refresh keybindings for NW.js
JavaScript
2
star
38

nw-react-cra-example

An example of integrating Create React App with NW.js
JavaScript
2
star
39

nw-window-manager

WIP: NW.js Window Management library
2
star
40

nw-test-suite

WIP: Testing suite for NW.js API
HTML
2
star
41

nw-react-next-example

An example of integrating Next with NW.js
JavaScript
2
star
42

nw-node-addon-example

Examples of building NW.js Node Addons via node-gyp (nan, cmake and ffi coming soon!)
JavaScript
2
star
43

faux-notifications

WIP - Library to create custom desktop notifications in NW.js
1
star
44

nw-cypress-example

NW.js + Cypress (WIP)
JavaScript
1
star
45

nw-selenium-javascript-example

An example of using Selenium for end-to-end testing of NW.js apps via JavaScript
JavaScript
1
star
46

nw-puppeteer-example

An example of using NW.js via Puppeteer.
JavaScript
1
star
47

base-volta-off-of-nwjs

Tool to update the Volta config in package.json so Node match's your NW.js version
JavaScript
1
star
48

limited-node-access-example

WIP: Example of a project with an iframe that has limited access to Node.js in NW.js
1
star
49

.github

1
star
50

nw-screen-capture

WIP: A library for setting up a screen capture menu in NW.js
1
star
51

nw-rich-tray-example

WIP: This is an example repo for a frameless window popup for a tray app in NW.js
1
star
52

nw-patches

Understand how NW.js changes upstream behaviour
1
star
53

nw-subdir-example

Example repo for having a parent package.json file that runs NW.js pointed to a child folder with its own package.json
HTML
1
star