├── src
    ├── sass
    │   ├── _layout.sass
    │   ├── _shame.sass
    │   ├── _trumps.sass
    │   ├── _utility.sass
    │   ├── _functions.sass
    │   ├── _mediaqueries.sass
    │   ├── _var.sass
    │   ├── _mixins.sass
    │   ├── _base.sass
    │   └── main.scss
    ├── index.js
    ├── store
    │   └── index.js
    ├── router
    │   └── index.js
    ├── css
    │   └── main.css
    ├── app.vue
    └── components
    │   ├── restrictions.vue
    │   ├── reasoning.vue
    │   ├── features.vue
    │   └── tips.vue
├── .eslintignore
├── assets
    ├── icon.icns
    ├── icon.ico
    └── icon.png
├── .sass-lint.yml
├── .travis.yml
├── secondwindow.html
├── .editorconfig
├── index.html
├── LICENSE
├── .gitignore
├── README.md
├── package.json
└── .eslintrc.js


/src/sass/_layout.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/sass/_shame.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/sass/_trumps.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/sass/_utility.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/sass/_functions.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/sass/_mediaqueries.sass:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /build/
3 | /config/
4 | /dist/
5 | /*.js
6 | 


--------------------------------------------------------------------------------
/src/sass/_var.sass:
--------------------------------------------------------------------------------
1 | 
2 | $white: #FFF
3 | $nearWhite: #EDEDED
4 | $black: #000
5 | 


--------------------------------------------------------------------------------
/src/sass/_mixins.sass:
--------------------------------------------------------------------------------
1 | 
2 | =bmp0
3 |     border: 0px
4 |     margin: 0px
5 |     padding: 0px
6 | 


--------------------------------------------------------------------------------
/assets/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheJaredWilcurt/vue-desktop-basic/HEAD/assets/icon.icns


--------------------------------------------------------------------------------
/assets/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheJaredWilcurt/vue-desktop-basic/HEAD/assets/icon.ico


--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TheJaredWilcurt/vue-desktop-basic/HEAD/assets/icon.png


--------------------------------------------------------------------------------
/.sass-lint.yml:
--------------------------------------------------------------------------------
1 | options:
2 |   config-file: node_modules/tjw-sasslint-rules/tjwsasslint.yml
3 | files:
4 |   include: 'src/sass/**/*.s+(a|c)ss'
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: required
 2 | dist: trusty
 3 | language: node_js
 4 | node_js:
 5 |   - "10"
 6 | install:
 7 |     - npm install
 8 | script:
 9 |     - npm run lint
10 |     - npm run sasslint
11 |     - node ./node_modules/.bin/build --concurrent --tasks linux-x86 --mirror https://dl.nwjs.io/ .
12 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | Vue.use(Vuex);
 2 | Vue.use(VueRouter);
 3 | 
 4 | // eslint-disable-next-line no-unused-vars
 5 | const app = new Vue({
 6 |   el: '#app',
 7 |   template: '<App />',
 8 |   components: {
 9 |     App: httpVueLoader('src/app.vue')
10 |   },
11 |   store: store,
12 |   router: router
13 | });
14 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line no-unused-vars
 2 | const store = new Vuex.Store({
 3 |   state: {
 4 |     greeting: 'Hello'
 5 |   },
 6 |   getters: {},
 7 |   mutations: {
 8 |     changeGreeting: function (state, newGreeting) {
 9 |       state.greeting = newGreeting;
10 |     }
11 |   },
12 |   actions: {}
13 | });
14 | 
15 | 


--------------------------------------------------------------------------------
/secondwindow.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Example of opening another window</title>
 5 |     <style>
 6 |       * {
 7 |         font-family: sans-serif;
 8 |       }
 9 |     </style>
10 |   </head>
11 |   <body>
12 |     See the "Tips" section for more information.
13 |     <script>
14 |       nw.Window.get().showDevTools();
15 |       console.log('nw.global.cow');
16 |       console.log(nw.global.cow);
17 |       console.log('That value was set in the first window, but is accessible in this second window.')
18 |     </script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: http://EditorConfig.org
 2 | 
 3 | # Top-most EditorConfig file
 4 | root = true
 5 | 
 6 | # defaults for all files
 7 | [*]
 8 | charset = utf-8
 9 | end_of_line = lf
10 | indent_size = 2
11 | indent_style = space
12 | insert_final_newline = true
13 | trim_trailing_whitespace = true
14 | 
15 | # Markdown files uses two trailing spaces to indicate a <br>
16 | [*.{md}]
17 | trim_trailing_whitespace = false
18 | 
19 | # 4 space indentation
20 | [*.{sass,scss,css}]
21 | indent_size = 4
22 | 
23 | # 2 space indentation
24 | [*.{html,json}]
25 | indent_size = 2
26 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>Vue-Desktop-Basic boilerplate</title>
 5 |     <link rel="stylesheet" href="src/css/main.css" />
 6 |   </head>
 7 |   <body>
 8 |     <div id="app"></div>
 9 | 
10 |     <!-- Dependencies -->
11 |     <script src="node_modules/vue/dist/vue.js"></script>
12 |     <script src="node_modules/vue-router/dist/vue-router.min.js"></script>
13 |     <script src="node_modules/vuex/dist/vuex.min.js"></script>
14 |     <script src="node_modules/http-vue-loader/src/httpVueLoader.js"></script>
15 | 
16 |     <!-- App scripts -->
17 |     <script src="src/router/index.js"></script>
18 |     <script src="src/store/index.js"></script>
19 |     <script src="src/index.js"></script>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | // eslint-disable-next-line no-unused-vars
 2 | const router = new VueRouter({
 3 |   routes: [
 4 |     {
 5 |       path: '*',
 6 |       redirect: 'features'
 7 |     },
 8 |     {
 9 |       path: '/features',
10 |       name: 'features',
11 |       component: httpVueLoader('src/components/features.vue')
12 |     },
13 |     {
14 |       path: '/reasoning',
15 |       name: 'reasoning',
16 |       component: httpVueLoader('src/components/reasoning.vue')
17 |     },
18 |     {
19 |       path: '/restrictions',
20 |       name: 'restrictions',
21 |       component: httpVueLoader('src/components/restrictions.vue')
22 |     },
23 |     {
24 |       path: '/tips',
25 |       name: 'tips',
26 |       component: httpVueLoader('src/components/tips.vue')
27 |     }
28 |   ]
29 | });
30 | 


--------------------------------------------------------------------------------
/src/css/main.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   border: 0px;
 4 |   margin: 0px;
 5 |   padding: 0px;
 6 |   padding-bottom: 20px;
 7 |   font-family: "Century Gothic", "Trebuchet MS", Tahoma, sans-serif;
 8 | }
 9 | 
10 | h1,
11 | h2,
12 | nav,
13 | p {
14 |   padding-right: 20px;
15 |   padding-left: 20px;
16 | }
17 | 
18 | h2 {
19 |   border-top: 3px solid #000;
20 |   padding-top: 1.2em;
21 | }
22 | 
23 | nav a {
24 |   display: inline-block;
25 |   padding: 0px 10px;
26 |   text-transform: capitalize;
27 | }
28 | 
29 | li {
30 |   padding-top: 7px;
31 |   padding-right: 20px;
32 |   line-height: 1.5;
33 | }
34 | 
35 | h2 + ul > li:first-of-type {
36 |   padding-top: 0px;
37 | }
38 | 
39 | code,
40 | pre {
41 |   background: #EDEDED;
42 |   border-radius: 8px;
43 |   padding: 3px 8px 5px 8px;
44 |   font-size: 15px;
45 | }
46 | 


--------------------------------------------------------------------------------
/src/sass/_base.sass:
--------------------------------------------------------------------------------
 1 | html,
 2 | body
 3 |     +bmp0
 4 |     padding-bottom: 20px
 5 |     font-family: "Century Gothic", "Trebuchet MS", Tahoma, sans-serif
 6 | 
 7 | h1,
 8 | h2,
 9 | nav,
10 | p
11 |     padding-right: 20px
12 |     padding-left: 20px
13 | 
14 | h2
15 |     border-top: 3px solid $black
16 |     padding-top: 1.2em
17 | 
18 | nav a
19 |     display: inline-block
20 |     padding: 0px 10px
21 |     text-transform: capitalize
22 | 
23 | li
24 |     padding-top: 7px
25 |     padding-right: 20px
26 |     line-height: 1.5
27 | 
28 | h2 + ul > li:first-of-type
29 |     padding-top: 0px
30 | 
31 | code,
32 | pre
33 |     background: $nearWhite
34 |     border-radius: 8px
35 |     padding: 3px 8px 5px 8px
36 |     font-size: 15px
37 |     -webkit-box-decoration-break: clone
38 |     box-decoration-break: clone
39 | 


--------------------------------------------------------------------------------
/src/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 | 
 4 |     <!-- example of getting data from the Vuex State -->
 5 |     <h1>{{ greeting }} World</h1>
 6 | 
 7 |     <!-- Vue Router  -->
 8 |     <nav>
 9 |       <router-link
10 |         v-for="(route, routeIndex) in $router.options.routes"
11 |         v-if="route.component"
12 |         :to="route.path"
13 |         :key="'route' + routeIndex"
14 |       >
15 |         {{ route.name }}
16 |       </router-link>
17 |       |
18 |       <a href="#" @click.prevent="openDevTools">Open Dev Tools</a>
19 |     </nav>
20 | 
21 |     <router-view />
22 | 
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | module.exports = {
28 |   name: 'app',
29 |   data: function () {
30 |     return {};
31 |   },
32 |   methods: {
33 |     openDevTools: function () {
34 |       nw.Window.get().showDevTools();
35 |     }
36 |   },
37 |   computed: {
38 |     greeting: function () {
39 |       return this.$store.state.greeting;
40 |     }
41 |   }
42 | };
43 | </script>
44 | 
45 | <style>
46 | .router-link-active {
47 |   border: 1px solid #00F;
48 |   border-radius: 50px;
49 |   padding: 1px 9px 3px;
50 | }
51 | </style>
52 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 The Jared Wilcurt
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (http://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # Typescript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | dist/
61 | package-lock.json
62 | 


--------------------------------------------------------------------------------
/src/sass/main.scss:
--------------------------------------------------------------------------------
 1 | 
 2 | @charset "utf-8";                    // Character type for the stylesheet
 3 | 
 4 | // ITCSS: SETTINGS
 5 | @import "_var.sass";                 // Sass Variables - Does not effect page, but other Sass files reference this file.
 6 | 
 7 | 
 8 | // ITCSS: TOOLS
 9 | @import "_mixins.sass";              // Sass Mixins - Does not effect page, but other Sass files reference this file.
10 | @import "_functions.sass";           // Sass Functions - Does not effect page, but other Sass files reference this file.
11 | 
12 | 
13 | // ITCSS: RESETS - Remove inconsistencies in the way different browsers render elements by default
14 | // Not needed in a desktop app
15 | 
16 | 
17 | // ITCSS: FRAMEWORKS/THEMES
18 | 
19 | 
20 | // ITCSS: PLUGINS
21 | 
22 | 
23 | // ITCSS: GENERIC (ELEMENTS/BASE)
24 | @import "_base.sass";                // h1, h2, h3, p, etc.
25 | @import "_layout.sass";              // General layout classes, like .col-xs-4
26 | @import "_utility.sass";             // Utility classes, like .wrapper or .text-center
27 | 
28 | 
29 | // ITCSS: OBJECTS - Grouped reusable chunks
30 | 
31 | 
32 | // ITCSS: COMPONENTS - Component-specific styles
33 | 
34 | 
35 | // ITCSS: CONTAINERS
36 | 
37 | 
38 | // ITCSS: TRUMPS
39 | @import "_mediaqueries.sass";        // Adjusts CSS of elements depending app width. Adaptive Web Design.
40 | @import "_trumps.sass";              // Override above styles with high specificity selectors. Use sparingly
41 | @import "_shame.sass";               // Code you wrote to meet a deadline and need to fix later
42 | 


--------------------------------------------------------------------------------
/src/components/restrictions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h2>Restrictions in ".vue" files:</h2>
 4 |     <p>This boilerplate does not use a bundler, which means there are some restrictions around how you should write your code.</p>
 5 |     <ul>
 6 |       <li>Usage of <code>.vue</code> files is allowed with the help of "http-vue-loader". However, this means your <code>.vue</code> files run directly in the browser.</li>
 7 |       <li>No usage of meta-languages (Sass/HAML/Pug/scss/etc) is allowed in <code>.vue</code> files, because <code>.vue</code> files are ran in the browser and the browser doesn't understand meta-languages.</li>
 8 |       <li>
 9 |         You can import any Node module and use it in your code, however when requiring them inside <code>.vue</code> files, you have to use <code>nw.require</code>.
10 |         <ul>
11 |           <li><code>const path = nw.require('path');</code></li>
12 |         </ul>
13 |       </li>
14 |       <li>
15 |         When referencing a globally declared variable, like something on the <code>window</code> object, in the template section of a component, you will need to create a <strong>computed</strong> value that returns the global item of the same name.
16 |         <ul>
17 |           <li><code v-pre>&lt;div&gt;{{ nw.App.dataPath }}&lt;/div&gt;</code></li>
18 |           <li>
19 |             <pre>
20 | computed: {
21 |   nw: function () {
22 |     return nw;
23 |   }
24 | }</pre>
25 |           </li>
26 |         </ul>
27 |       </li>
28 |     </ul>
29 | 
30 |     <h2>ES6+ restrictions:</h2>
31 |     <ul>
32 |       <li>You may only use the parts of ES6+ that are already supported in Chromium <strong>{{ chromiumVersion }}</strong> or Node <strong>{{ nodeVersion }}</strong>.</li>
33 |       <li>You may use parts of ES6+ not supported in this version of Chromium/Node, but you will need to supply polyfills, or transpile to ES5.</li>
34 |     </ul>
35 |   </section>
36 | </template>
37 | 
38 | <script>
39 | module.exports = {
40 |   name: 'restrictions',
41 |   computed: {
42 |     chromiumVersion: function () {
43 |       return nw.process.versions.chromium;
44 |     },
45 |     nodeVersion: function () {
46 |       return nw.process.versions.node;
47 |     }
48 |   }
49 | };
50 | </script>
51 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-desktop-basic boilerplate
 3 | 
 4 | 
 5 | ## What is this
 6 | 
 7 | This is a boilerplate for a simple desktop app. It comes with tips about common tasks for a desktop app.
 8 | 
 9 | 
10 | ## Should I use this
11 | 
12 | Probably not? It's more of a proof of concept to see if you can run all of the features of a Vue app without the need for a bundler, since the process of bundling is pretty pointless for a desktop app (no point in shaving off 25KB when you are shipping 100MB).
13 | 
14 | Still though, there are a lot of good tips for NW.js apps in there in general, that are applicable to any desktop app, whether it is using Vue & NW.js or React & Electron.
15 | 
16 | **What should I use instead?**
17 | 
18 | * [NW.js + Vue 3 + Vite + Pinia + Vitest + Vue-DevTools](https://github.com/nwutils/nw-vue3-boilerplate) - This the newest/most robust/best option for desktop apps with Vue.
19 | * [NW-Vue-CLI-Example](https://github.com/nwutils/nw-vue-cli-example) is basically a normal Vue-CLI project with some additional setup already added in to work as a desktop app.
20 | 
21 | 
22 | ### Features
23 | 
24 | The following are already set up:
25 | 
26 | * Vue.js
27 | * Vue-Router
28 | * Vuex
29 | * Vue-DevTools
30 | * Sass
31 | * Sasslint
32 | * ESLint
33 | * nwjs-builder-phoenix
34 | * [VSCode intellisense for nw](http://docs.nwjs.io/en/latest/For%20Users/FAQ/)
35 | 
36 | 
37 | ## Usage
38 | 
39 | 1. Download and install [Node.js](https://nodejs.org)
40 | 1. Download `vue-desktop-basic`
41 | 1. Run `npm install`
42 | 1. Run `npm start`
43 | 
44 | 
45 | ## Linting
46 | 
47 | 1. `npm run lint` will lint your `.js` and `.vue` files according to the rules in `.eslintrc.js`
48 | 1. `npm run fix` this will auto-fix any linting issues that `npm run lint` finds (not everything can be auto fixed)
49 | 1. `npm run sass` will start watching for changes in the sass folder and process the changes to the css folder.
50 | 1. `npm run sasslint` will lint your `.sass` and `.scss` files.
51 | 1. `npm run sassfix` will attempt to auto-fix Sass linting issues, however it may take several runs and not everything can be auto fixed
52 | 
53 | 
54 | ## To do a build:
55 | 
56 | 1. `npm install`
57 | 1. `npm run build`
58 | 
59 | All settings regarding the build are handled in the `package.json`.
60 | 
61 | 
62 | ### Vue-DevTools
63 | 
64 | If you want Vue-DevTools to be accessible in the Chromium DevTools in your app, you cannot use the minified version of Vue.js (use `vue.js` not `vue.min.js`).
65 | 
66 | 
67 | * * *
68 | 
69 | All other instructions and details are inside the app.
70 | 
71 | * * *
72 | 
73 | ### TO DO List:
74 | 
75 | * Add in Vue-Test-Utils
76 | 


--------------------------------------------------------------------------------
/src/components/reasoning.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h2>Reasoning:</h2>
 4 |     <p><em>Why not use a bundler, like WebPack/Browserify/Parcel/StealJS/Fuse-Box/Etc?</em></p>
 5 |     <ul>
 6 |       <li>Because bundlers are designed around the limitations of the web. We are working with a different medium, Cross-Platform Desktop Apps (XPDAs).</li>
 7 |       <li>The purpose of a bundler is to bundle our code. Features like concatenating, tree-shaking, uglifying, and minifying our code doesn't really offer any benefit. Nor does reducing the number of simultaneous network requests for assets. All assets are local, because desktop apps should follow the best practice of "offline-first".</li>
 8 |       <li>Ultimately you are shipping an 80+ MB app to your end user, so the tiny optimizations made for the medium of web are quite arbitrary here.</li>
 9 |       <li>A much greater concern for desktop apps would be the amount of dependencies in your <code>node_modules</code> folder, since all dependencies, and their dependencies are shipped to the end user (this excludes devDependencies). For more detailed information on optimizing for desktop apps read this article:
10 |         <ul>
11 |           <li><a href="#" @click.prevent="nw.Shell.openExternal('https://dev.to/thejaredwilcurt/reducing-app-distribution-size-in-nwjs-3d5f')">Reducing app distribution size in NW.js</a></li>
12 |         </ul>
13 |       </li>
14 |       <li>If you wish to use additional features for development (linting, HMR, Sass, etc), I would recommend adding those features via a task runner, like Gulp, or just via simple npm scripts.</li>
15 |     </ul>
16 |     <p><em>Why not use a CDN for Vue/Vue-Router/Vuex/Etc instead of adding them as dependencies?</em></p>
17 |     <ul>
18 |       <li>Because for desktop apps you should always be designing with an "offline-first" mentality. Your app should still run if the user is in Airplane mode.</li>
19 |       <li>Keeping them as dependencies allows you to easily handle version management.</li>
20 |       <li>An alternative option would be to create a script that downloads the desired versions of these libraries into an untracked folder. This would mean you would have the desired versions, and no additional files or dependencies. Then run that script as a <code>postinstall</code> npm script. The downside to this is that it would be less familiar to other developers. Though technically more efficient, it is also slightly less maintable and requires documentation for future maintainers/contributors.</li>
21 |     </ul>
22 |   </section>
23 | </template>
24 | 
25 | <script>
26 | module.exports = {
27 |   name: 'reasoning',
28 |   computed: {
29 |     nw: function () {
30 |       return nw;
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/components/features.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h2>Features:</h2>
 4 |     <p><em>vue-desktop-basic</em> comes with:</p>
 5 |     <ul>
 6 |       <li v-for="(feature, featureIndex) in features" :key="'feature' + featureIndex">
 7 |         <a href="#" @click.prevent="openInDefaultBrowser(feature.url)">{{ feature.name }}</a>
 8 |         <small v-if="feature.version">
 9 |           (v{{ feature.version }})
10 |         </small>
11 |         <small v-if="!feature.version && feature.packageName">
12 |           {{ getVersionNumber(feature.packageName) }}
13 |         </small>
14 |       </li>
15 |     </ul>
16 |   </section>
17 | </template>
18 | 
19 | <script>
20 | module.exports = {
21 |   name: 'features',
22 |   data: function () {
23 |     return {
24 |       features: [
25 |         {
26 |           name: 'NW.js',
27 |           version: nw.process.versions.nw,
28 |           url: 'https://nwjs.io'
29 |         },
30 |         {
31 |           name: 'NW.js Builder (Phoenix)',
32 |           packageName: 'nwjs-builder-phoenix',
33 |           url: 'https://github.com/evshiron/nwjs-builder-phoenix'
34 |         },
35 |         {
36 |           name: 'Vue.js',
37 |           version: Vue.version,
38 |           url: 'https://vuejs.org'
39 |         },
40 |         {
41 |           name: 'Vue-Router',
42 |           version: VueRouter.version,
43 |           url: 'https://router.vuejs.org/en'
44 |         },
45 |         {
46 |           name: 'Vuex',
47 |           version: Vuex.version,
48 |           url: 'https://vuex.vuejs.org/en'
49 |         },
50 |         {
51 |           name: 'HTTP-Vue-Loader',
52 |           packageName: 'http-vue-loader',
53 |           url: 'https://github.com/FranckFreiburger/http-vue-loader'
54 |         },
55 |         {
56 |           name: 'Vue-DevTools',
57 |           packageName: 'vue-devtools',
58 |           url: 'https://github.com/vuejs/vue-devtools'
59 |         }
60 |       ]
61 |     };
62 |   },
63 |   methods: {
64 |     // Since your app is running in Chromium,
65 |     // links to websites will navigate away from your app,
66 |     // so you need to open them in the user's default browser
67 |     openInDefaultBrowser: function (url) {
68 |       nw.Shell.openExternal(url);
69 |     },
70 |     // Check that the dependency exists, then read it's version number from its manifest
71 |     getVersionNumber: function (packageName) {
72 |       let fs = nw.require('fs');
73 |       let manifest = '';
74 |       let version = '';
75 | 
76 |       if (fs.existsSync('./node_modules/' + packageName + '/package.json')) {
77 |         manifest = fs.readFileSync('./node_modules/' + packageName + '/package.json');
78 |       } else if (packageName === 'vue-devtools' && fs.existsSync('./node_modules/nw-vue-devtools/src/vue-devtools/package.json')) {
79 |         manifest = fs.readFileSync('./node_modules/nw-vue-devtools/src/vue-devtools/package.json');
80 |       }
81 |       if (manifest) {
82 |         manifest = manifest.toString();
83 |         manifest = JSON.parse(manifest);
84 |         version = '(v' + manifest.version + ')';
85 |       }
86 |       return version;
87 |     }
88 |   }
89 | };
90 | </script>
91 | 
92 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-desktop-basic",
 3 |   "version": "1.1.0",
 4 |   "description": "Boilerplate for a Vue based Desktop App",
 5 |   "keywords": [
 6 |     "vue",
 7 |     "boilerplate",
 8 |     "desktop"
 9 |   ],
10 |   "author": "TheJaredWilcurt@users.noreply.github.com",
11 |   "license": "MIT",
12 |   "repository": "https://github.com/TheJaredWilcurt/vue-desktop-basic",
13 |   "main": "index.html",
14 |   "scripts": {
15 |     "start": "nw .",
16 |     "build": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
17 |     "lint": "eslint --config=.eslintrc.js src/**/*.js src/**/*.vue",
18 |     "fix": "eslint --fix --config=.eslintrc.js src/**/*.js src/**/*.vue",
19 |     "sass": "node-sass -w -i -o=src/css --output-style=expanded --error-bell ./src/sass",
20 |     "sasslint": "sass-lint -c .sass-lint.yml -v -f table",
21 |     "sassfix": "sass-lint-auto-fix -c .sass-lint.yml",
22 |     "validate": "npm run lint && npm run sasslint"
23 |   },
24 |   "window": {
25 |     "width": 800,
26 |     "height": 500,
27 |     "icon": "assets/icon.png"
28 |   },
29 |   "chromium-args": "--load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
30 |   "dependencies": {
31 |     "http-vue-loader": "1.x.x",
32 |     "vue": "2.x.x",
33 |     "vue-router": "3.x.x",
34 |     "vuex": "3.x.x"
35 |   },
36 |   "devDepComments": {
37 |     "babel-eslint": "Allows linting of ES6+",
38 |     "eslint": "Linting .js and .vue files",
39 |     "eslint-plugin-jest": "Linter is aware of Jest globals",
40 |     "eslint-plugin-vue": "Linting of Vue Templates",
41 |     "node-sass": "Process .sass and .scss to .css",
42 |     "nw": "Latest NW.js SDK version",
43 |     "nw-vue-devtools": "Downloads latest Vue DevTools, modifies it, does a build so it works with NW.js",
44 |     "nwjs-builder-phoenix": "Automates doing dist builds of your desktop app",
45 |     "nwjs-types": "Gives VSCode intellisense for nw.whatever",
46 |     "sass-lint": "Lints your Sass Files",
47 |     "sass-lint-auto-fix": "Attempts to auto-fix Sass linting problems",
48 |     "tjw-sasslint-rules": "A very strict ruleset for Sass linting"
49 |   },
50 |   "devDependencies": {
51 |     "babel-eslint": "8.x.x",
52 |     "eslint": "4.x.x",
53 |     "eslint-plugin-jest": "^22.4.1",
54 |     "eslint-plugin-vue": "4.x.x",
55 |     "node-sass": "4.x.x",
56 |     "nw": "sdk",
57 |     "nw-vue-devtools-prebuilt": "0.x.x",
58 |     "nwjs-builder-phoenix": "1.x.x",
59 |     "nwjs-types": "^1.0.0",
60 |     "sass-lint": "1.x.x",
61 |     "sass-lint-auto-fix": "0.x.x",
62 |     "tjw-sasslint-rules": "2.x.x"
63 |   },
64 |   "build": {
65 |     "nwVersion": "latest",
66 |     "nwFlavor": "normal",
67 |     "targets": [
68 |       "zip",
69 |       "nsis7z"
70 |     ],
71 |     "excludes": [
72 |       "package-lock.json",
73 |       "assets/*",
74 |       "src/sass/*"
75 |     ],
76 |     "strippedProperties": [
77 |       "chromium-args",
78 |       "scripts",
79 |       "devDependencies",
80 |       "build"
81 |     ],
82 |     "win": {
83 |       "icon": "assets/icon.ico"
84 |     },
85 |     "mac": {
86 |       "icon": "assets/icon.icns"
87 |     },
88 |     "nsis": {
89 |       "icon": "assets/icon.ico",
90 |       "unIcon": "assets/icon.ico",
91 |       "languages": [
92 |         "English"
93 |       ],
94 |       "diffUpdaters": false,
95 |       "hashCalculation": true
96 |     }
97 |   }
98 | }
99 | 


--------------------------------------------------------------------------------
/src/components/tips.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <h2>Tips:</h2>
 4 |     <ul>
 5 |       <li>
 6 |         A best practice is to store your user's settings as a json file in <code>nw.App.dataPath</code>. This location is specific to the currently logged in computer user, your app, and the OS. On <em>your</em> computer the path would be:
 7 |         <ul>
 8 |           <li><code>require('path').join(nw.App.dataPath, 'settings.json');</code></li>
 9 |           <li><code>{{ settingsFile }}</code></li>
10 |         </ul>
11 |       </li>
12 |       <li>
13 |         When linking to an external website, you must explicitly tell NW.js to open the user's default browser. Otherwise you will navigate away from your app to the new URL.
14 |         <ul>
15 |           <li><code>&lt;a href="#" @click.prevent="nw.Shell.openExternal('https://vuejs.org')">VueJS.org&lt;/a></code></li>
16 |           <li><a href="#" @click.prevent="nw.Shell.openExternal('https://vuejs.org')">VueJS.org</a></li>
17 |         </ul>
18 |       </li>
19 |       <li>You can access any part of your <code>package.json</code> via <code :title="JSON.stringify(nw.App.manifest, null, 2)">nw.App.manifest</code>.</li>
20 |       <li>
21 |         You can share data between windows, by using <code>nw.global</code>.
22 |         <ul>
23 |           {{ setGlobalValue() }}
24 |           <li><code>nw.global.cow = 'moo';</code></li>
25 |         </ul>
26 |       </li>
27 |       <li>You can create a new window using <a href="#" @click.prevent="openWindowExample"><code>nw.Window.open('file.html')</code></a></li>
28 |       <li>
29 |         You have access to Node's <code>process</code> via <code>nw.process</code>, which will give you things like:
30 |         <ul>
31 |           <li :title="nw.process.arch">     <code>nw.process.arch</code>        - Tells you if the machine is 32 or 64-bit (ia32/x64)</li>
32 |           <li :title="nw.process.platform"> <code>nw.process.platform</code>    - Tells you the OS (win32/darwin/linux)</li>
33 |           <li :title="nw.process.execPath"> <code>nw.process.execPath</code>    - Location of the NW.js executable that the app is running in</li>
34 |           <li :title="nw.process.cwd()">    <code>nw.process.cwd()</code>       - Current Working Directory</li>
35 |           <li>                              <code>nw.process.chdir('..')</code> - Change Directory</li>
36 |         </ul>
37 |       </li>
38 |       <li>
39 |         Using <code>const win = nw.Window.get();</code> you have access to many controls over the current window.
40 |         <ul>
41 |           <li><a href="#"><code @click.prevent="nw.Window.get().maximize()">                 win.maximize();</code></a></li>
42 |           <li><a href="#"><code @click.prevent="nw.Window.get().restore()">                  win.restore();</code></a></li>
43 |           <li><a href="#"><code @click.prevent="nw.Window.get().minimize()">                 win.minimize();</code></a></li>
44 |           <li><a href="#"><code @click.prevent="nw.Window.get().showDevTools()">             win.showDevTools();</code></a></li>
45 |           <li><a href="#"><code @click.prevent="nw.Window.get().print({autoprint: false})">  win.print({autoprint: false})</code></a></li>
46 |           <li><a href="#"><code @click.prevent="nw.Window.get().reload()">                   win.reload();</code></a></li>
47 |           <li><a href="#"><code @click.prevent="nw.Window.get().reloadIgnoringCache()">      win.reloadIgnoringCache();</code></a></li>
48 |           <li><a href="#"><code @click.prevent="nw.Window.get().close()">                    win.close();</code></a></li>
49 |         </ul>
50 |       </li>
51 |       <li>
52 |         When handling CSS, because all code will only be ran in 1 browser (Chromium):
53 |         <ul>
54 |           <li>You do not need to use CSS Resets or Normalizers. Whatever CSS works for you will work for 100% of your end users because you are handing them the browser you developed on.</li>
55 |           <li>You can remove all vendor prefixes, unless it is for a feature not yet implemented in this version of Chromium.</li>
56 |         </ul>
57 |       </li>
58 |     </ul>
59 |   </section>
60 | </template>
61 | 
62 | <script>
63 | module.exports = {
64 |   name: 'tips',
65 |   methods: {
66 |     setGlobalValue: function () {
67 |       nw.global.cow = 'moo';
68 |     },
69 |     openWindowExample: function () {
70 |       // You can pass in the same window options that you use in your package.json as well:
71 |       // http://docs.nwjs.io/en/latest/References/Window/#windowopenurl-options-callback
72 |       let options = {
73 |         width: 500,
74 |         height: 300
75 |       };
76 |       nw.Window.open('secondwindow.html', options, function (win) {
77 |         win.on('loaded', function () {
78 |           console.log('Second Window has opened and finished loading its DOM.');
79 |         });
80 |       });
81 |     }
82 |   },
83 |   computed: {
84 |     settingsFile: function () {
85 |       let path = nw.require('path');
86 |       let settingsFileLocation = path.join(nw.App.dataPath, 'settings.json');
87 |       return settingsFileLocation;
88 |     },
89 |     nw: function () {
90 |       return nw;
91 |     }
92 |   }
93 | };
94 | </script>
95 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
  1 | module.exports = {
  2 |     'root': true,
  3 |     'parserOptions': {
  4 |         'parser': 'babel-eslint',
  5 |         'ecmaVersion': 8,
  6 |         'sourceType': 'module'
  7 |     },
  8 |     'env': {
  9 |         'browser': true,
 10 |         'node': true
 11 |     },
 12 |     'globals': {
 13 |         'jsdom': true,
 14 |         'Promise': true,
 15 |         'nw': true,
 16 |         'Vue': true,
 17 |         'Vuex': true,
 18 |         'VueRouter': true,
 19 |         'httpVueLoader': true,
 20 |         'store': true,
 21 |         'router': true
 22 |     },
 23 |     // required to lint *.vue files
 24 |     'plugins': [
 25 |         'vue'
 26 |     ],
 27 |     'extends': ['plugin:vue/recommended', "plugin:jest/recommended"],
 28 |     "plugins": ["jest"],
 29 |     'rules': {
 30 |         'arrow-parens':                ['off'],
 31 |         'brace-style':                 ['error', '1tbs', { 'allowSingleLine': true }],
 32 |         'comma-dangle':                ['error', 'never'],
 33 |         'comma-spacing':               ['error', { 'before': false, 'after': true }],
 34 |         'comma-style':                 ['error', 'last'],
 35 |         'curly':                       ['error'],
 36 |         // allow async-await
 37 |         'generator-star-spacing':      ['off'],
 38 |         // 2 space indentation to match .editorconfig
 39 |         'indent':                      ['error', 2, { 'SwitchCase': 1 }],
 40 |         'keyword-spacing':             ['error', { 'before': true, 'after': true }],
 41 |         // allow debugger during development
 42 |         'no-console':                  process.env.NODE_ENV === 'production' ? 'error' : 'off',
 43 |         'no-debugger':                 process.env.NODE_ENV === 'production' ? 'error' : 'off',
 44 |         'no-multi-spaces':             ['error'],
 45 |         'no-restricted-syntax':        ['error', 'Property[method="true"]'],
 46 |         'no-unused-vars':              ['error'],
 47 |         'no-undef':                    ['error'],
 48 |         // Only allow let and const, no var
 49 |         'no-var':                      ['error'],
 50 |         'object-curly-spacing':        ['error', 'always'],
 51 |         'one-var':                     ['error', 'never'],
 52 |         'quotes':                      ['error', 'single'],
 53 |         'semi':                        ['error', 'always'],
 54 |         'space-before-blocks':         ['error', 'always'],
 55 |         'space-before-function-paren': ['error', 'always'],
 56 |         'space-in-parens':             ['error', 'never'],
 57 |         'space-infix-ops':             ['error'],
 58 |         'spaced-comment':              ['error', 'always'],
 59 |         // Vue Linter Options
 60 |         'vue/attribute-hyphenation':    ['error', 'never'],
 61 |         'vue/attributes-order':         ['error', {
 62 |                                           'order': [
 63 |                                             'LIST_RENDERING',   // 'v-for item in items'
 64 |                                             'CONDITIONALS',     // 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
 65 |                                             'RENDER_MODIFIERS', // 'v-once', 'v-pre'
 66 |                                             'BINDING',          // 'v-model', 'v-bind', ':property="foo"'
 67 |                                             'CONTENT',          // 'v-text', 'v-html'
 68 |                                             'DEFINITION',       // 'is'
 69 |                                             'GLOBAL',           // 'id'
 70 |                                             'OTHER_ATTR',       // 'customProp="foo"', 'class', 'type', 'value' etc
 71 |                                             'EVENTS',           // '@click="functionCall"', 'v-on="event"'
 72 |                                             'UNIQUE'            // 'slot', 'key', 'ref'
 73 |                                           ]
 74 |                                         }],
 75 |         'vue/html-closing-bracket-newline':
 76 |                                         ['error', {
 77 |                                             'singleline': 'never',
 78 |                                             'multiline': 'always'
 79 |                                         }],
 80 |         'vue/html-closing-bracket-spacing':
 81 |                                         ['error', {
 82 |                                             'startTag': 'never',
 83 |                                             'endTag': 'never',
 84 |                                             'selfClosingTag': 'always'
 85 |                                         }],
 86 |         'vue/html-indent':              ['error', 2, {
 87 |                                             'attribute': 1,
 88 |                                             'closeBracket': 0
 89 |                                         }],
 90 |         'vue/html-self-closing':        ['error', {
 91 |                                             'html': {
 92 |                                                 'void': 'always',
 93 |                                                 'normal': 'never',
 94 |                                                 'component': 'always'
 95 |                                             }
 96 |                                         }],
 97 |         'vue/max-attributes-per-line':  ['error', {
 98 |                                             'singleline': 3,
 99 |                                             'multiline': {
100 |                                                 'max': 1,
101 |                                                 'allowFirstLine': false
102 |                                             }
103 |                                         }],
104 |         'vue/name-property-casing':     ['error', 'PascalCase'],
105 |         'vue/order-in-components':      ['error', { 'order': [
106 |                                             'el',
107 |                                             'name',
108 |                                             ['template', 'render'],
109 |                                             'parent',
110 |                                             'functional',
111 |                                             ['delimiters', 'comments'],
112 |                                             ['components', 'directives'],
113 |                                             'extends',
114 |                                             'mixins',
115 |                                             'inheritAttrs',
116 |                                             'model',
117 |                                             ['props', 'propsData'],
118 |                                             'data',
119 |                                             'methods',
120 |                                             'computed',
121 |                                             'filters',
122 |                                             'watch',
123 |                                             'LIFECYCLE_HOOKS',
124 |                                             'renderError'
125 |                                         ]}],
126 |         'vue/prop-name-casing':         ['error', 'camelCase']
127 |     }
128 | };
129 | 


--------------------------------------------------------------------------------