├── .editorconfig
├── .eslintrc.cjs
├── .github
    └── workflows
    │   └── node.js.yml
├── .gitignore
├── CODE_OF_CONDUCT.md
├── LICENSE
├── README.md
├── eslint.config.js
├── index.html
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    ├── icon-256.ico
    ├── icon.icns
    ├── icon.ico
    └── icon.png
├── screenshot.png
├── server.cjs
├── src
    ├── App.vue
    ├── assets
    │   ├── base.css
    │   ├── logo.svg
    │   ├── main.css
    │   └── nw.png
    ├── components
    │   ├── ExternalLink.vue
    │   └── ResourceGroup.vue
    ├── helpers
    │   ├── applyPrototypes.js
    │   └── constants.js
    ├── main.js
    ├── router
    │   └── index.js
    ├── stores
    │   └── counter.js
    └── views
    │   ├── FsExample.vue
    │   ├── HelloWorld.vue
    │   ├── PiniaDemo.vue
    │   └── ResourceLinks.vue
├── tests
    └── unit
    │   ├── App.test.js
    │   ├── __snapshots__
    │       └── App.test.js.snap
    │   ├── components
    │       └── ExternalLink.test.js
    │   ├── main.test.js
    │   ├── setup.js
    │   ├── testHelpers.js
    │   └── views
    │       ├── FsExample.test.js
    │       ├── HelloWorld.test.js
    │       ├── PiniaDemo.test.js
    │       └── __snapshots__
    │           ├── FsExample.test.js.snap
    │           ├── HelloWorld.test.js.snap
    │           └── PiniaDemo.test.js.snap
├── vite.config.js
└── waitOnConfig.json


/.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,snap}]
17 | trim_trailing_whitespace = false
18 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | // Due to a bug in the ESLint import plugin, this file is required
2 | 


--------------------------------------------------------------------------------
/.github/workflows/node.js.yml:
--------------------------------------------------------------------------------
 1 | # This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 2 | # For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
 3 | 
 4 | name: Node.js CI
 5 | 
 6 | on:
 7 |   push:
 8 |     branches: [ "main" ]
 9 |   pull_request:
10 |     branches: [ "main" ]
11 | 
12 | jobs:
13 |   build:
14 | 
15 |     runs-on: ubuntu-latest
16 | 
17 |     steps:
18 |     - uses: actions/checkout@v3
19 |     - uses: volta-cli/action@v4
20 |     - run: node -v
21 |     - run: npm -v
22 |     - run: npm ci
23 |     - run: npm run build:vue
24 |     - run: npm run lint
25 |     - run: npm t
26 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-vue
14 | dist-ssr
15 | coverage
16 | *.local
17 | 
18 | # Editor directories and files
19 | .vscode/*
20 | !.vscode/extensions.json
21 | .idea
22 | *.suo
23 | *.ntvs*
24 | *.njsproj
25 | *.sln
26 | *.sw?
27 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # "No Ideologies" Code of Conduct
 2 | 
 3 | The following are the guidelines we expect our community members and maintainers to follow.
 4 | 
 5 | * * *
 6 | 
 7 | ## Terminology and Scope
 8 | 
 9 | **What defines a "maintainer"?**
10 | 
11 | * A maintainer is anyone that interacts with the community on behalf of this project. Amount of code written is not a qualifier. A maintainer may include those who solely help in support roles such as in resolving issues, improving documentation, administrating or moderating forums/chatrooms, or any other non-coding specific roles. Maintainers also include those that are responsible for the building and upkeep of the project.
12 | 
13 | **What defines a "community member"?**
14 | 
15 | * Anyone interacting with this project directly, including maintainers.
16 | 
17 | **What is the scope of these guidelines?**
18 | 
19 | * These guidelines apply only to this project and forms of communication directly related to it, such as issue trackers, forums, chatrooms, and in person events specific to this project. If a member is violating these guidelines outside of this project or on other platforms, that is beyond our scope and any grievances should be handled on those platforms.
20 | 
21 | **Discussing the guidelines:**
22 | 
23 | * Discussions around these guidelines, improving, updating, or altering them, is permitted so long as the discussions do not violate any existing guidelines.
24 | 
25 | * * *
26 | 
27 | ## Guidelines
28 | 
29 | ### Guidelines for community members
30 | 
31 | This project is technical in nature and not based around any particular non-technical ideology. As such, communication that is based primarily around ideologies unrelated to the technologies used by this repository are not permitted.
32 | 
33 | Any discussion or communication that is primarily focused around an ideology, be it about race, gender, politics, religion, or anything else non-technical, is not allowed. Everyone has their own ideological preferences, beliefs, and opinions. We do not seek to marginalize, exclude, or judge anyone for their ideologies. To prevent conflict between those with differing or opposing ideologies, all communication on these subjects are prohibited. Some discussions around these topics may be important, however this project is not the proper channel for these discussions.
34 | 
35 | ### Guidelines for maintainers
36 | 
37 | * Maintainers must abide by the same rules as all other community members mentioned above. However, in addition, maintainers are held to a higher standard, explained below.
38 | * Maintainers should answer all questions politely.
39 | * If someone is upset or angry about something, it's probably because it's difficult to use, so thank them for bringing it to your attention and address ways to solve the problem. Maintainers should focus on the content of the message, and not on how it was delivered.
40 | * A maintainer should seek to update members when an issue they brought up is resolved.
41 | 
42 | * * *
43 | 
44 | ## Appropriate response to violations
45 | 
46 | How to respond to a community member or maintainer violating a guideline.
47 | 
48 | 1. If an issue is created that violates a guideline a maintainer should close and lock the issue, explaining "This issue is in violation of our code of conduct. Please review it before posting again." with a link to this document.
49 | 1. If a member repeatedly violates the guidelines established in this document, they should be politely warned that continuing to violate the rules may result in being banned from the community. This means revoking access and support to interactions relating directly to the project (issue trackers, chatrooms, forums, in person events, etc.). However, they may continue to use the technology in accordance with its license.
50 | 1. If a maintainer is in violation of a guideline, they should be informed of such with a link to this document. If additional actions are required of the maintainer but not taken, then other maintainers should be informed of these inactions.
51 | 1. If a maintainer repeatedly violates the guidelines established in this document, they should be politely warned that continuing to violate the rules may result in being banned from the community. This means revoking access and support to interactions relating directly to the project (issue trackers, chatrooms, forums, in person events, etc.). However, they may continue to use the technology in accordance with its license. In addition, future contributions to this project may be ignored as well.
52 | 
53 | * * *
54 | 
55 | Based on version 1.0.3 from https://github.com/CodifiedConduct/coc-no-ideologies
56 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 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 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # NW.js + Vue 3 Desktop App Boilerplate
  2 | 
  3 | The easiest, quickest, and best option for building Desktop Apps with Vue.
  4 | 
  5 | 100% test coverage. Vue-DevTools built in.
  6 | 
  7 | All you do is `npm install && npm start` and you got a desktop app and web app development environment with Vue-DevTools built-in.
  8 | 
  9 | **Does this work for web or just desktop?**
 10 | 
 11 | **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).
 12 | 
 13 | Run `npm run build` and you're ready to ship/deploy: Web App, Windows Installer, OSX and Linux apps.
 14 | 
 15 | ![A screenshot of the default app running on Windows](screenshot.png)
 16 | 
 17 | 
 18 | ## Technology colophon
 19 | 
 20 | * **Vue 3** - Frontend framework
 21 | * **NW.js** - Desktop App runtime environment
 22 |   * Chromium 137
 23 |   * Node.js 23.11.0
 24 | * **Vue-DevTools** - Official Vite plugin
 25 | * **Vite** - Dev Server/Bundler/App build tool
 26 | * **Pinia** - Global State Management
 27 | * **Vue-Router** - Frontend routing/navigation
 28 | * **Options API** - [Component organizational structure](https://user-images.githubusercontent.com/4629794/204181213-6c9bcece-62fb-4790-8fc2-7df546ca7df5.png)
 29 | * **Constants Plugin** - Gives you a [dedicated place to store constants](https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin) in a component
 30 | * **NW-Builder-Phoenix** - Automated desktop builds
 31 | * **ESLint** - Code error prevention and stylistic consistency
 32 |   * Vue Linting
 33 |   * Accessibility Linting
 34 |   * Test Linting
 35 |   * Import Linting
 36 | * **Vitest** - Vite-based Unit/integration/behavioral testing
 37 |   * 100% test coverage examples
 38 |   * @vue/test-utils - Test helpers for interacting with Vue in tests
 39 |   * vue3-snapshot-serializer - Dramatically improved snapshot formatting
 40 |   * @pinia/testing - Initialize Pinia in tests
 41 | 
 42 | 
 43 | ## Documentation
 44 | 
 45 | In all `.vue` components, you have access to `nw`, `global`, `process`, `require`, and the boolean `isDesktop`:
 46 | 
 47 | ```js
 48 | methods: {
 49 |   example: function () {
 50 |     if (this.isDesktop) {
 51 |       console.log('Your OS is ' + this.process.platform);
 52 |       console.log('Your AppData location is ' + this.nw.App.dataPath);
 53 |       // Sets a value on Node's global, meaning other windows have access to this data.
 54 |       this.global.cow = 'moo';
 55 |       // The contents of the current directory
 56 |       console.log(this.require('fs').readdirSync('.'));
 57 |     }
 58 |   }
 59 | }
 60 | ```
 61 | 
 62 | Or even directly from the template (with some slight changes to work within the Vue context):
 63 | ```html
 64 | <div v-if="isDesktop">
 65 |   Your OS is {{ process.platform }}.
 66 |   Your AppData location is {{ nw.App.dataPath }}.
 67 |   <button @click="nw.global.cow = 'moo'">
 68 |     Clicking this button sets a value on Node's global.
 69 |     Meaning other windows have access to this data.
 70 |   </button>
 71 |   The contents of the current directory are {{ nw.require('fs').readdirSync('.') }}.
 72 | </div>
 73 | ```
 74 | 
 75 | 
 76 | ## Running locally
 77 | 
 78 | 1. Download, Fork, or Clone this repo
 79 | 1. Install [Volta](https://volta.sh)
 80 |    * It will handle using the correct Node version based on the `package.json`
 81 | 1. Run `npm install`
 82 | 1. Run `npm start`
 83 | 
 84 | 
 85 | ## Lint
 86 | 
 87 | Uses rules in `./eslint.json`
 88 | 
 89 | 1. `npm run lint` to see linting errors
 90 | 1. `npm run fix` to auto-fix linting errors (where possible)
 91 | 
 92 | 
 93 | ## Tests
 94 | 
 95 | 1. `npm t` runs all unit tests and shows coverage output
 96 | 1. `npm t -- -u` runs all unit tests, updating snapshots (use with care)
 97 | 
 98 | 
 99 | ## Building for distribution
100 | 
101 | 1. `npm run build:clean` will delete your `./dist` and `./dist-vue` folders
102 | 1. `npm run build:vue` will build just your Vue app for web distribution (`./dist-vue`)
103 | 1. `npm run build:nw` will build just your NW.js app (`./dist`) for all supported platforms (Windows, OSX, Linux 32-Bit, Linux 64-Bit)
104 | 1. `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
105 | 
106 | 
107 | ## IMPORTANT NOTE ABOUT BUILDS
108 | 
109 | 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.
110 | 
111 | 
112 | ## Removing Pinia
113 | 
114 | I set up Pinia in this project to save you time (and because it's amazing). If you don't need global state management for your project, you can remove Pinia by doing the following:
115 | 
116 | * Delete the `/src/store` folder and its contents
117 | * Delete `/src/views/PiniaDemo.vue`
118 | * Delete `/tests/unit/views/PiniaDemo.test.js`
119 | * Remove the Pinia Demo `RouterLink` from `/src/App.vue`
120 | * Remove import and route object relating to "PiniaDemo" from `/src/router/index.js`
121 | * Remove the lines of code from `/tests/unit/testHelpers.js` that say "pinia"
122 | * Remove the lines of code from `/package.json` that say "pinia"
123 | * `npm install && npm t -- -u`
124 | * `git add -A && git commit -m "Removed Pinia"`
125 | 
126 | 
127 | ## Alternatives
128 | 
129 | * [Vue 3 Desktop and Mobile](https://github.com/rigor789/nw-vue3-boilerplate) - Fork of this repo but with NativeScript added to also build for Android and iOS.
130 | * [nw-vue-cli-example](https://github.com/nwutils/nw-vue-cli-example) - Uses Vue-CLI (WebPack), has Vue 2 and Vue 3 branches.
131 | * [nwjs-vue](https://github.com/elegantweb/nwjs-vue) - Uses Vue-CLI 2
132 | * [vue-desktop-basic](https://github.com/TheJaredWilcurt/vue-desktop-basic) - Does not use a build system at all, all `.vue` files run directly in the browser context
133 | * [nw-vue3-typescript-pinia](https://github.com/codeh2o/nw-vue3-typescript-pinia) - Old fork of this repo but with TS added
134 | 
135 | 
136 | ## Updating to newer NW.js versions
137 | 
138 | 1. When updating the version of NW.js devDependency, also update these:
139 |    * `package.json` version, devDeps, build nwVersion, volta
140 |    * `build.target` in `vite.config.js`
141 |    * Update the Chromium/Node version numbers at the top of the README
142 | 1. Bump the version number, and all the npm scripts that reference the version number
143 | 1. Run `npm run regression` after updating dependencies or other major changes to verify builds still work correctly
144 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import path from 'node:path';
 2 | 
 3 | import pluginJs from '@eslint/js';
 4 | import tjwBase from 'eslint-config-tjw-base';
 5 | import tjwImport from 'eslint-config-tjw-import';
 6 | import tjwJest from 'eslint-config-tjw-jest';
 7 | import tjwVue from 'eslint-config-tjw-vue';
 8 | import pluginImport from 'eslint-plugin-import';
 9 | import pluginJest from 'eslint-plugin-jest';
10 | import pluginVue from 'eslint-plugin-vue';
11 | import pluginVueA11y from 'eslint-plugin-vuejs-accessibility';
12 | 
13 | const __dirname = import.meta.dirname;
14 | const vue3Recommended = pluginVue.configs['flat/recommended'];
15 | const vueA11yRecommended = pluginVueA11y.configs['flat/recommended'];
16 | 
17 | export default [
18 |   pluginJs.configs.recommended,
19 |   pluginImport.flatConfigs.recommended,
20 |   pluginJest.configs['flat/recommended'],
21 |   ...vue3Recommended,
22 |   ...vueA11yRecommended,
23 |   tjwBase.configs.recommended,
24 |   tjwImport,
25 |   tjwJest.configs.recommended,
26 |   tjwVue,
27 |   {
28 |     // project specific rules/settings
29 |     languageOptions: {
30 |       globals: {
31 |         vi: true
32 |       }
33 |     },
34 |     rules: {
35 |       'import/no-unused-modules': 'off',
36 |       'import/no-extraneous-dependencies': 'off',
37 | 
38 |       // If this is not turned off, linting throws because it can't find 'jest' install
39 |       'jest/no-deprecated-functions': 'off',
40 |       'vuejs-accessibility/label-has-for': [
41 |         'error',
42 |         {
43 |           components: ['Label'],
44 |           required: {
45 |             some: ['nesting', 'id']
46 |           },
47 |           allowChildren: false
48 |         }
49 |       ]
50 |     },
51 |     settings: {
52 |       'import/resolver': {
53 |         vite: {
54 |           viteConfig: {
55 |             resolve: {
56 |               alias: {
57 |                 '@': path.resolve(__dirname, 'src'),
58 |                 '@@': path.resolve(__dirname, 'tests'),
59 |                 '@@@': path.resolve(__dirname, 'docs')
60 |               }
61 |             }
62 |           }
63 |         }
64 |       }
65 |     }
66 |   }
67 | ];
68 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Your App Name Here</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="app"></div>
11 |     <script type="module" src="/src/main.js"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "@/*": ["./src/*"],
 6 |       "@@/*": ["./tests/*"]
 7 |     }
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "ManifestComments": [
  3 |     "Only add dependencies that you want shipped to the end user, for everything else, use devDependencies, including things that will be bundled by Vite.",
  4 |     "NW.js requires a name and a main, everything else is optional.",
  5 |     "The build section is used by nwjs-builder-phoenix, see its documentation for more info",
  6 |     "To turn spell checking off, remove it from the chromium-args in this file",
  7 |     "Unit tests inaccurately report 1 line of code not being covered because this bug: vitejs/vite-plugin-vue #368"
  8 |   ],
  9 |   "name": "your-app-name",
 10 |   "version": "1.1.0",
 11 |   "main": "http://localhost:4175",
 12 |   "node-remote": "http://localhost:4175",
 13 |   "node-main": "",
 14 |   "window": {
 15 |     "width": 960,
 16 |     "height": 600,
 17 |     "min_width": 800,
 18 |     "min_height": 500,
 19 |     "icon": "public/icon.png"
 20 |   },
 21 |   "private": true,
 22 |   "scripts": {
 23 |     "postinstall": "npx --yes base-volta-off-of-nwjs@latest",
 24 |     "start": "concurrently -k npm:dev:web npm:dev:desktop",
 25 |     "dev:web": "vite --port 4175",
 26 |     "dev:desktop": "wait-on -c waitOnConfig.json http-get://localhost:4175 && nw .",
 27 |     "build": "npm run build:clean && npm run build:vue && npm run build:nw",
 28 |     "build:clean": "rimraf ./dist-vue ./dist",
 29 |     "build:vue": "vite build",
 30 |     "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
 31 |     "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
 32 |     "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
 33 |     "build:win:clean": "rimraf ./dist-vue ./dist/your-app-name-1.1.0-win-x86 ./dist/your-app-name-1.1.0-win-x86.zip ./dist/your-app-name-1.1.0-win-x86.7z ./dist/your-app-name-1.1.0-win-x86-Setup.exe",
 34 |     "build:lin:clean": "rimraf ./dist-vue ./dist/your-app-name-1.1.0-linux-x64 ./dist/your-app-name-1.1.0-linux-x64.zip",
 35 |     "run:win": "dist\\your-app-name-1.1.0-win-x86\\your-app-name.exe",
 36 |     "run:lin": "./dist/your-app-name-1.1.0-linux-x64/your-app-name",
 37 |     "regression": "rd /s /q node_modules & rd /s /q node_modules & rd /s /q node_modules & npm install && npm run lint && npm test && npm run build:win && npm run run:win",
 38 |     "regression:lin": "rm -r -f node_modules && npm install && npm run lint && npm test && npm run build:lin && npm run run:lin",
 39 |     "lint": "eslint --ext .js,.vue src tests",
 40 |     "fix": "npm run lint -- --fix",
 41 |     "test": "vitest run --coverage"
 42 |   },
 43 |   "dependencies": {
 44 |     "express": "^5.1.0"
 45 |   },
 46 |   "devDependencies": {
 47 |     "@eslint/js": "^9.27.0",
 48 |     "@pinia/testing": "^1.0.1",
 49 |     "@stylistic/eslint-plugin": "^4.4.0",
 50 |     "@vitejs/plugin-vue": "^5.2.4",
 51 |     "@vitest/coverage-v8": "^3.1.4",
 52 |     "@vue/test-utils": "^2.4.6",
 53 |     "concurrently": "^9.1.0",
 54 |     "eslint": "^9.27.0",
 55 |     "eslint-config-tjw-base": "^4.2.0",
 56 |     "eslint-config-tjw-import": "^2.0.0",
 57 |     "eslint-config-tjw-jest": "^3.0.0",
 58 |     "eslint-config-tjw-vue": "^4.0.0",
 59 |     "eslint-import-resolver-vite": "^2.1.0",
 60 |     "eslint-plugin-import": "^2.31.0",
 61 |     "eslint-plugin-jest": "^28.11.0",
 62 |     "eslint-plugin-vue": "^10.1.0",
 63 |     "eslint-plugin-vuejs-accessibility": "^2.4.1",
 64 |     "globals": "^16.2.0",
 65 |     "happy-dom": "^17.4.7",
 66 |     "nw": "0.100.0-sdk",
 67 |     "nwjs-builder-phoenix": "^1.15.0",
 68 |     "pinia": "^3.0.2",
 69 |     "rimraf": "^6.0.1",
 70 |     "vite": "^6.3.5",
 71 |     "vite-plugin-vue-devtools": "^7.7.6",
 72 |     "vitest": "^3.1.4",
 73 |     "vue": "^3.5.15",
 74 |     "vue-options-api-constants-plugin": "^1.0.3",
 75 |     "vue-router": "^4.5.1",
 76 |     "vue3-snapshot-serializer": "^2.10.0",
 77 |     "wait-on": "^8.0.3"
 78 |   },
 79 |   "chromium-args": "--enable-spell-checking --disable-features=ProcessPerSiteUpToMainFrameThreshold",
 80 |   "build": {
 81 |     "nwVersion": "v0.100.0",
 82 |     "nwFlavor": "normal",
 83 |     "targets": [
 84 |       "zip",
 85 |       "nsis7z"
 86 |     ],
 87 |     "files": [
 88 |       "**/*"
 89 |     ],
 90 |     "excludes": [
 91 |       "src/**/*",
 92 |       "tests/**/*",
 93 |       "public/**/*",
 94 |       "dist-vue/**/*.js.map",
 95 |       "dist-vue/**/*.css.map",
 96 |       "dist-vue/**/*-legacy*",
 97 |       ".editorconfig",
 98 |       ".eslintignore",
 99 |       ".eslintrc",
100 |       ".gitignore",
101 |       "CODE_OF_CONDUCT.md",
102 |       "index.html",
103 |       "jsconfig.json",
104 |       "package-lock.json",
105 |       "screenshot.png",
106 |       "vite.config.js",
107 |       "waitOnConfig.json"
108 |     ],
109 |     "strippedProperties": [
110 |       "ManifestComments",
111 |       "scripts",
112 |       "devDependencies",
113 |       "build",
114 |       "volta"
115 |     ],
116 |     "overriddenProperties": {
117 |       "main": "http://localhost:4185",
118 |       "node-remote": "http://localhost:4185",
119 |       "node-main": "server.cjs",
120 |       "chromium-args": "--enable-spell-checking",
121 |       "window": {
122 |         "width": 960,
123 |         "height": 600,
124 |         "min_width": 700,
125 |         "min_height": 500,
126 |         "icon": "dist-vue/icon.png"
127 |       }
128 |     },
129 |     "win": {
130 |       "icon": "public/icon-256.ico"
131 |     },
132 |     "mac": {
133 |       "icon": "public/icon.icns"
134 |     },
135 |     "nsis": {
136 |       "icon": "public/icon-256.ico",
137 |       "unIcon": "public/icon.ico",
138 |       "languages": [
139 |         "English"
140 |       ],
141 |       "diffUpdaters": false,
142 |       "hashCalculation": true
143 |     }
144 |   },
145 |   "type": "module",
146 |   "volta": {
147 |     "node": "23.11.0"
148 |   }
149 | }
150 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon-256.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/public/icon-256.ico


--------------------------------------------------------------------------------
/public/icon.icns:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/public/icon.icns


--------------------------------------------------------------------------------
/public/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/public/icon.ico


--------------------------------------------------------------------------------
/public/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/public/icon.png


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/screenshot.png


--------------------------------------------------------------------------------
/server.cjs:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | 
3 | const app = express();
4 | app.use(express.static('./dist-vue'));
5 | app.listen(4185);
6 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <nav>
 4 |       <RouterLink :to="{ name: 'welcome' }">
 5 |         Welcome
 6 |       </RouterLink>
 7 |       <RouterLink
 8 |         v-if="isDesktop"
 9 |         :to="{ name: 'fs' }"
10 |       >
11 |         File System Demo
12 |       </RouterLink>
13 |       <RouterLink :to="{ name: 'pinia' }">
14 |         Pinia Demo
15 |       </RouterLink>
16 |       <RouterLink :to="{ name: 'resources' }">
17 |         Resources
18 |       </RouterLink>
19 |     </nav>
20 |   </header>
21 | 
22 |   <main>
23 |     <RouterView />
24 |   </main>
25 | </template>
26 | 
27 | <script>
28 | export default {
29 |   name: 'App'
30 | };
31 | </script>
32 | 
33 | <style scoped>
34 | nav {
35 |   margin-bottom: 2rem;
36 |   text-align: center;
37 | }
38 | nav a {
39 |   background: #FFF3;
40 |   border-radius: 0.5rem;
41 |   margin: 2rem;
42 |   padding: 0.5rem 1rem;
43 | }
44 | nav a:hover {
45 |   background: #FFF5;
46 |   color: #FFF;
47 | }
48 | .router-link-active {
49 |   background: #FFF7;
50 |   color: #FFF;
51 | }
52 | .router-link-active:hover {
53 |   background: #FFF8;
54 | }
55 | </style>
56 | 


--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
 1 | /* color palette from https://github.com/vuejs/theme */
 2 | :root {
 3 |   --vt-c-white: #FFFFFF;
 4 |   --vt-c-black: #181818;
 5 |   --vt-c-text-light-1: var(--vt-c-indigo);
 6 |   --vt-c-text-dark-1: var(--vt-c-white);
 7 |   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
 8 | }
 9 | 
10 | /* semantic color variables for this project */
11 | :root {
12 |   --color-background: var(--vt-c-white);
13 |   --color-heading: var(--vt-c-text-light-1);
14 |   --color-text: var(--vt-c-text-light-1);
15 |   --section-gap: 160px;
16 | }
17 | 
18 | @media (prefers-color-scheme: dark) {
19 |   :root {
20 |     --color-background: var(--vt-c-black);
21 |     --color-heading: var(--vt-c-text-dark-1);
22 |     --color-text: var(--vt-c-text-dark-2);
23 |   }
24 | }
25 | 
26 | *,
27 | *::before,
28 | *::after {
29 |   position: relative;
30 |   margin: 0;
31 |   font-weight: normal;
32 |   box-sizing: border-box;
33 | }
34 | 
35 | body {
36 |   min-height: 100vh;
37 |   background: var(--color-background);
38 |   color: var(--color-text);
39 |   font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
40 |   font-size: 15px;
41 |   line-height: 1.6;
42 |   text-rendering: optimizeLegibility;
43 |   -webkit-font-smoothing: antialiased;
44 |   -moz-osx-font-smoothing: grayscale;
45 |   transition: color 0.5s, background-color 0.5s;
46 | }
47 | 


--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg
 2 |   xmlns="http://www.w3.org/2000/svg"
 3 |   viewBox="0 0 261.76 226.69"
 4 |   xmlns:v="https://vecta.io/nano"
 5 | >
 6 |   <path
 7 |     d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z"
 8 |     fill="#41B883"
 9 |   />
10 |   <path
11 |     d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z"
12 |     fill="#34495E"
13 |   />
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
 1 | @import './base.css';
 2 | 
 3 | #app {
 4 |   max-width: 1280px;
 5 |   margin: 0px auto;
 6 |   padding: 2rem;
 7 |   font-weight: normal;
 8 | }
 9 | 
10 | a,
11 | .green {
12 |   color: hsla(160, 100%, 37%, 1);
13 |   text-decoration: none;
14 |   transition: 0.4s;
15 | }
16 | 
17 | button {
18 |   background: hsla(160, 100%, 37%, 1);
19 |   border: 0px;
20 |   border-radius: 3px;
21 |   padding: 4px 6px;
22 | }
23 | button:hover {
24 |   background: hsla(160, 100%, 40%, 1);
25 | }
26 | button:active {
27 |   background: hsla(160, 100%, 43%, 1);
28 | }
29 | 
30 | strong {
31 |   font-weight: bold;
32 | }
33 | 
34 | hr {
35 |   width: 100%;
36 |   background: var(--color-text);
37 |   margin: 15px 0px;
38 | }
39 | 
40 | textarea {
41 |   width: 100%;
42 |   min-height: 15rem;
43 |   background: #333;
44 |   border: 0px;
45 |   margin-top: 1rem;
46 |   padding: 0.5rem;
47 |   color: #CCC;
48 | }
49 | 
50 | .flex {
51 |   display: flex;
52 | }
53 | .container {
54 |   display: inline-block;
55 |   min-width: 200px;
56 |   margin-right: 2rem;
57 |   vertical-align: top;
58 | }
59 | 
60 | .mt-1 {
61 |   margin-top: 1rem;
62 | }
63 | 
64 | .mb-2 {
65 |   margin-bottom: 2rem;
66 | }
67 | 
68 | .center {
69 |   text-align: center;
70 | }
71 | 
72 | @media (hover: hover) {
73 |   a:hover {
74 |     background-color: hsla(160, 100%, 37%, 0.2);
75 |   }
76 | }
77 | 
78 | @media (min-width: 1024px) {
79 |   body {
80 |     display: flex;
81 |     flex-direction: row;
82 |     justify-content: center;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/src/assets/nw.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nwutils/nw-vue3-boilerplate/5ddc8fc4bad195c23ab6d047e92d54616473263c/src/assets/nw.png


--------------------------------------------------------------------------------
/src/components/ExternalLink.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a
 3 |     v-text="name"
 4 |     data-test="link"
 5 |     href="#"
 6 |     :title="url"
 7 |     @click.prevent="open('https://' + url)"
 8 |   ></a>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: 'ExternalLink',
14 |   props: {
15 |     name: {
16 |       type: String,
17 |       required: true
18 |     },
19 |     url: {
20 |       type: String,
21 |       required: true
22 |     }
23 |   },
24 |   methods: {
25 |     open: function (url) {
26 |       if (this.isDesktop) {
27 |         this.nw.Shell.openExternal(url);
28 |       } else {
29 |         window.open(url, '_blank');
30 |       }
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/components/ResourceGroup.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="item">
 3 |     <div class="details">
 4 |       <h3>
 5 |         <slot name="heading"></slot>
 6 |       </h3>
 7 |       <slot></slot>
 8 |     </div>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   name: 'ResourceGroup'
15 | };
16 | </script>
17 | 
18 | <style scoped>
19 | .item {
20 |   display: inline-flex;
21 |   margin-top: 2rem;
22 | }
23 | 
24 | .details {
25 |   flex: 1;
26 |   margin-left: 1rem;
27 | }
28 | 
29 | h3 {
30 |   margin-bottom: 0.4rem;
31 |   color: var(--color-heading);
32 |   font-size: 1.2rem;
33 |   font-weight: 500;
34 | }
35 | 
36 | @media (min-width: 1024px) {
37 |   .item {
38 |     margin-top: 0px;
39 |     padding: 0.4rem 0rem 1rem 0rem;
40 |   }
41 | }
42 | </style>
43 | 


--------------------------------------------------------------------------------
/src/helpers/applyPrototypes.js:
--------------------------------------------------------------------------------
 1 | // Make NW.js and Node globals available in Vue
 2 | export default function applyPrototypes (component) {
 3 |   component.isDesktop = Boolean(window.nw);
 4 |   if (window.nw) {
 5 |     component.nw = window.nw;
 6 |     component.process = window.nw.process;
 7 |     component.require = window.nw.require;
 8 |     component.global = global;
 9 |   }
10 |   return component;
11 | }
12 | 


--------------------------------------------------------------------------------
/src/helpers/constants.js:
--------------------------------------------------------------------------------
1 | export const APP_NAME = 'Your App Name Here';
2 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createPinia } from 'pinia';
 2 | import { createApp } from 'vue';
 3 | import constantsPlugin from 'vue-options-api-constants-plugin';
 4 | 
 5 | import { router } from '@/router/index.js';
 6 | 
 7 | import applyPrototypes from '@/helpers/applyPrototypes.js';
 8 | 
 9 | import App from '@/App.vue';
10 | 
11 | import '@/assets/main.css';
12 | 
13 | export const app = createApp(App);
14 | applyPrototypes(app.config.globalProperties);
15 | app.use(createPinia());
16 | app.use(router);
17 | app.use(constantsPlugin);
18 | app.mount('#app');
19 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHashHistory } from 'vue-router';
 2 | 
 3 | import FsExample from '@/views/FsExample.vue';
 4 | import HelloWorld from '@/views/HelloWorld.vue';
 5 | import PiniaDemo from '@/views/PiniaDemo.vue';
 6 | import ResourceLinks from '@/views/ResourceLinks.vue';
 7 | 
 8 | export const router = createRouter({
 9 |   history: createWebHashHistory(),
10 |   routes: [
11 |     {
12 |       path: '/',
13 |       name: 'welcome',
14 |       component: HelloWorld
15 |     },
16 |     {
17 |       path: '/fs',
18 |       name: 'fs',
19 |       component: FsExample
20 |     },
21 |     {
22 |       path: '/pinia',
23 |       name: 'pinia',
24 |       component: PiniaDemo
25 |     },
26 |     {
27 |       path: '/resources',
28 |       name: 'resources',
29 |       component: ResourceLinks
30 |     },
31 |     {
32 |       path: '/:catchAll(.*)*',
33 |       name: '404',
34 |       redirect: '/'
35 |     }
36 |   ]
37 | });
38 | 


--------------------------------------------------------------------------------
/src/stores/counter.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia';
 2 | 
 3 | export const counterStore = defineStore('counter', {
 4 |   state: function () {
 5 |     return {
 6 |       count: 2
 7 |     };
 8 |   },
 9 |   actions: {
10 |     resetState: function () {
11 |       this.count = 2;
12 |     },
13 |     incrementCount: function () {
14 |       this.count = this.count + 1;
15 |     }
16 |   },
17 |   getters: {
18 |     doubledCount: function (state) {
19 |       return state.count * 2;
20 |     }
21 |   }
22 | });
23 | 


--------------------------------------------------------------------------------
/src/views/FsExample.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="isDesktop" class="container">
 3 |     <h2 class="green">📁 File System Example:</h2>
 4 | 
 5 |     <div v-if="error">
 6 |       There was an error attempting to read from the file system.
 7 |     </div>
 8 | 
 9 |     <button
10 |       data-test="fsExampleButton"
11 |       @click="getCurrentDirectory"
12 |     >
13 |       <template v-if="!error">
14 |         Click for File System example
15 |       </template>
16 |       <template v-else>
17 |         Try again for File System example
18 |       </template>
19 |     </button>
20 | 
21 |     <template v-if="contents.length">
22 |       <p>
23 |         <strong>The contents of the current working directory:</strong>
24 |       </p>
25 |       <ul class="columns">
26 |         <li
27 |           v-for="(name, index) in contents"
28 |           :key="'contents' + index"
29 |         >
30 |           {{ name }}
31 |         </li>
32 |       </ul>
33 |     </template>
34 |   </div>
35 | </template>
36 | 
37 | <script>
38 | export default {
39 |   name: 'FsExample',
40 |   data: function () {
41 |     return {
42 |       contents: [],
43 |       error: false
44 |     };
45 |   },
46 |   methods: {
47 |     getCurrentDirectory: function () {
48 |       if (this.isDesktop) {
49 |         const fs = this.require('fs');
50 |         try {
51 |           this.contents = fs.readdirSync('.');
52 |           this.error = false;
53 |         } catch {
54 |           this.contents = [];
55 |           this.error = true;
56 |         }
57 |       }
58 |     }
59 |   }
60 | };
61 | </script>
62 | 
63 | <style scoped>
64 | p {
65 |   margin: 1rem 0rem 0.5rem;
66 | }
67 | .columns {
68 |   column-count: 3;
69 |   column-gap: 4rem;
70 | }
71 | </style>
72 | 


--------------------------------------------------------------------------------
/src/views/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="greetings">
  3 |     <div class="logos">
  4 |       <img
  5 |         v-if="isDesktop"
  6 |         alt="NW.js logo"
  7 |         src="../assets/nw.png"
  8 |       />
  9 |       <img
 10 |         alt="Vue logo"
 11 |         src="../assets/logo.svg"
 12 |       />
 13 |     </div>
 14 | 
 15 |     <h1 class="green" data-test="appName">{{ APP_NAME }}</h1>
 16 |     <h2 class="green" data-test="message">{{ message }}</h2>
 17 |     <h3>
 18 |       This boilerplate uses
 19 |       <ExternalLink name="NW.js" url="nwjs.io" /> +
 20 |       <ExternalLink name="Vite" url="vitejs.dev" /> +
 21 |       <ExternalLink name="Vue 3" url="vuejs.org" /> +
 22 |       <ExternalLink name="Pinia" url="pinia.vuejs.org" /> +
 23 |       <ExternalLink name="Vue-Router" url="router.vuejs.org" /> +
 24 |       the <ExternalLink name="superior Options API" url="docs.google.com/presentation/d/1fsDhn_MptD6c-_ALgurQtvaRFkfbfukbbFGfEfckzvk/edit?usp=sharing" />.
 25 |     </h3>
 26 |     <div v-if="isDesktop" class="center mt-1">
 27 |       <p v-if="isDevMode" class="container">
 28 |         <button
 29 |           data-test="devToolsButton"
 30 |           @click="nw.Window.get().showDevTools()"
 31 |         >
 32 |           Open DevTools
 33 |         </button>
 34 |       </p>
 35 |       <p class="container">
 36 |         <button
 37 |           data-test="openAppInBrowserButton"
 38 |           @click="openAppInBrowser"
 39 |         >
 40 |           Open App in default browser
 41 |         </button>
 42 |       </p>
 43 |     </div>
 44 |     <p v-else>
 45 |       Notice that the <strong>same app conditionally renders</strong> different content
 46 |       in a normal browser than <strong>when ran as a desktop app</strong>.
 47 |     </p>
 48 |   </div>
 49 | </template>
 50 | 
 51 | <script>
 52 | import { APP_NAME } from '@/helpers/constants.js';
 53 | 
 54 | import ExternalLink from '@/components/ExternalLink.vue';
 55 | 
 56 | export default {
 57 |   name: 'HelloWorld',
 58 |   components: {
 59 |     ExternalLink
 60 |   },
 61 |   constants: {
 62 |     APP_NAME
 63 |   },
 64 |   methods: {
 65 |     openAppInBrowser: function () {
 66 |       if (this.isDesktop) {
 67 |         this.nw.Shell.openExternal(window.location.href);
 68 |       }
 69 |     }
 70 |   },
 71 |   computed: {
 72 |     isDevMode: function () {
 73 |       return this.isDesktop && this.process.versions['nw-flavor'] === 'sdk';
 74 |     },
 75 |     message: function () {
 76 |       if (this.isDesktop) {
 77 |         return 'NW.js & Vue Boilerplate';
 78 |       }
 79 |       return 'Vue Boilerplate';
 80 |     }
 81 |   }
 82 | };
 83 | </script>
 84 | 
 85 | <style scoped>
 86 | .logos {
 87 |   display: flex;
 88 |   align-items: center;
 89 |   justify-content: center;
 90 | }
 91 | .logos img {
 92 |   max-width: 160px;
 93 |   max-height: 160px;
 94 |   margin: 1rem 1rem 1rem 1rem;
 95 | }
 96 | 
 97 | h1 {
 98 |   font-size: 2.6rem;
 99 |   font-weight: 700;
100 | }
101 | 
102 | h2 {
103 |   font-size: 2.1rem;
104 | }
105 | 
106 | h3 {
107 |   font-size: 1.2rem;
108 | }
109 | 
110 | .greetings h1,
111 | .greetings h2,
112 | .greetings h3 {
113 |   text-align: center;
114 | }
115 | </style>
116 | 


--------------------------------------------------------------------------------
/src/views/PiniaDemo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container mb-2">
 3 |     <h2 class="green">🍍 Pinia Example:</h2>
 4 | 
 5 |     <ul>
 6 |       <li><strong>Count:</strong> {{ count }}</li>
 7 |       <li><strong>Doubled Count:</strong> {{ doubledCount }}</li>
 8 |       <li>
 9 |         <button
10 |           data-test="incrementButton"
11 |           @click="counterStore.incrementCount"
12 |         >
13 |           Increment Count
14 |         </button>
15 |       </li>
16 |     </ul>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import { mapState } from 'pinia';
22 | 
23 | import { counterStore } from '@/stores/counter.js';
24 | 
25 | export default {
26 |   name: 'PiniaDemo',
27 |   computed: {
28 |     counterStore: function () {
29 |       return counterStore();
30 |     },
31 |     ...mapState(counterStore, [
32 |       'count',
33 |       'doubledCount'
34 |     ])
35 |   }
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/views/ResourceLinks.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <ResourceGroup>
 3 |     <template #heading>Documentation</template>
 4 |     <template #default>
 5 |       <ExternalLink name="Vue" url="vuejs.org" />,
 6 |       <ExternalLink name="NW.js" url="nwjs.io" />,
 7 |       <ExternalLink name="Pinia" url="pinia.vuejs.org" />,
 8 |       <ExternalLink name="Vite" url="vitejs.dev/guide/features.html" />,
 9 |       <ExternalLink name="Vue Router" url="router.vuejs.org" />
10 |     </template>
11 |   </ResourceGroup>
12 | 
13 |   <ResourceGroup>
14 |     <template #heading>Tooling</template>
15 |     <template #default>
16 |       <ul>
17 |         <li><ExternalLink name="Vue Dev Tools" url="github.com/vuejs/devtools" /> (built in)</li>
18 |         <li>
19 |           <ExternalLink name="Sublime Text" url="www.sublimetext.com" /> +
20 |           <ExternalLink name="Vue Syntax Highlighting" url="packagecontrol.io/packages/Vue%20Syntax%20Highlight" />
21 |         </li>
22 |         <li>
23 |           <ExternalLink name="Vitest" url="vitest.dev" /> +
24 |           <ExternalLink name="Vue Test-Utils" url="test-utils.vuejs.org" /> +
25 |           <ExternalLink name="Vue Snapshot Serializer" url="TheJaredWilcurt.com/vue-snapshot-serializer" />
26 |         </li>
27 |       </ul>
28 |     </template>
29 |   </ResourceGroup>
30 | 
31 |   <ResourceGroup>
32 |     <template #heading>Resources:</template>
33 |     <template #default>
34 |       <ul>
35 |         <li><ExternalLink name="NW Utils" url="nwutils.io" /></li>
36 |         <li><ExternalLink name="Awesome Vue" url="github.com/vuejs/awesome-vue" /></li>
37 |         <li><ExternalLink name="Awesome Vue 3" url="github.com/vuesomedev/awesome-vue-3" /></li>
38 |       </ul>
39 |     </template>
40 |   </ResourceGroup>
41 | 
42 |   <ResourceGroup>
43 |     <template #heading>Community</template>
44 |     <template #default>
45 |       <ul>
46 |         <li><ExternalLink name="Vue Discord Chat" url="chat.vuejs.org" /></li>
47 |         <li><ExternalLink name="NW.js Discord Chat" url="discord.gg/tyx267vKRH" /></li>
48 |         <li><ExternalLink name="NW.js Gitter Chat" url="discord.gg/tyx267vKRH" /></li>
49 |       </ul>
50 |     </template>
51 |   </ResourceGroup>
52 | </template>
53 | 
54 | <script>
55 | import ExternalLink from '@/components/ExternalLink.vue';
56 | import ResourceGroup from '@/components/ResourceGroup.vue';
57 | 
58 | export default {
59 |   name: 'ResourceLinks',
60 |   components: {
61 |     ExternalLink,
62 |     ResourceGroup
63 |   }
64 | };
65 | </script>
66 | 


--------------------------------------------------------------------------------
/tests/unit/App.test.js:
--------------------------------------------------------------------------------
 1 | import App from '@/App.vue';
 2 | 
 3 | import testHelpers from '@@/unit/testHelpers.js';
 4 | 
 5 | describe('App.vue', () => {
 6 |   const setupWrapper = function () {
 7 |     return testHelpers.mount(App);
 8 |   };
 9 | 
10 |   describe('Desktop', () => {
11 |     test('Render default contents', () => {
12 |       const wrapper = setupWrapper();
13 | 
14 |       expect(wrapper)
15 |         .toMatchSnapshot();
16 |     });
17 |   });
18 | 
19 |   describe('Web', () => {
20 |     beforeEach(() => {
21 |       window.webSetup();
22 |     });
23 | 
24 |     test('Render default contents', () => {
25 |       const wrapper = setupWrapper();
26 | 
27 |       expect(wrapper)
28 |         .toMatchSnapshot();
29 |     });
30 |   });
31 | });
32 | 


--------------------------------------------------------------------------------
/tests/unit/__snapshots__/App.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
  2 | 
  3 | exports[`App.vue > Desktop > Render default contents 1`] = `
  4 | <header>
  5 |   <nav>
  6 |     <a
  7 |       class=""
  8 |       href="#/"
  9 |     >
 10 |       Welcome
 11 |     </a>
 12 |     <a
 13 |       class=""
 14 |       href="#/fs"
 15 |     >
 16 |       File System Demo
 17 |     </a>
 18 |     <a
 19 |       class=""
 20 |       href="#/pinia"
 21 |     >
 22 |       Pinia Demo
 23 |     </a>
 24 |     <a
 25 |       class=""
 26 |       href="#/resources"
 27 |     >
 28 |       Resources
 29 |     </a>
 30 |   </nav>
 31 | </header>
 32 | <main>
 33 |   <!---->
 34 | </main>
 35 | `;
 36 | 
 37 | exports[`App.vue > Web > Render default contents 1`] = `
 38 | <header>
 39 |   <nav>
 40 |     <a
 41 |       aria-current="page"
 42 |       class="
 43 |         router-link-active
 44 |         router-link-exact-active
 45 |       "
 46 |       href="#/"
 47 |     >
 48 |       Welcome
 49 |     </a>
 50 |     <!-- v-if -->
 51 |     <a
 52 |       class=""
 53 |       href="#/pinia"
 54 |     >
 55 |       Pinia Demo
 56 |     </a>
 57 |     <a
 58 |       class=""
 59 |       href="#/resources"
 60 |     >
 61 |       Resources
 62 |     </a>
 63 |   </nav>
 64 | </header>
 65 | <main>
 66 |   <div class="greetings">
 67 |     <div class="logos">
 68 |       <!-- v-if -->
 69 |       <img
 70 |         alt="Vue logo"
 71 |         src="/src/assets/logo.svg"
 72 |       />
 73 |     </div>
 74 |     <h1 class="green">
 75 |       Your App Name Here
 76 |     </h1>
 77 |     <h2 class="green">
 78 |       Vue Boilerplate
 79 |     </h2>
 80 |     <h3>
 81 |       This boilerplate uses
 82 |       <a
 83 |         href="#"
 84 |         title="nwjs.io"
 85 |       >
 86 |         NW.js
 87 |       </a>
 88 |       +
 89 |       <a
 90 |         href="#"
 91 |         title="vitejs.dev"
 92 |       >
 93 |         Vite
 94 |       </a>
 95 |       +
 96 |       <a
 97 |         href="#"
 98 |         title="vuejs.org"
 99 |       >
100 |         Vue 3
101 |       </a>
102 |       +
103 |       <a
104 |         href="#"
105 |         title="pinia.vuejs.org"
106 |       >
107 |         Pinia
108 |       </a>
109 |       +
110 |       <a
111 |         href="#"
112 |         title="router.vuejs.org"
113 |       >
114 |         Vue-Router
115 |       </a>
116 |       + the
117 |       <a
118 |         href="#"
119 |         title="docs.google.com/presentation/d/1fsDhn_MptD6c-_ALgurQtvaRFkfbfukbbFGfEfckzvk/edit?usp=sharing"
120 |       >
121 |         superior Options API
122 |       </a>
123 |       .
124 |     </h3>
125 |     <p>
126 |       Notice that the
127 |       <strong>
128 |         same app conditionally renders
129 |       </strong>
130 |       different content in a normal browser than
131 |       <strong>
132 |         when ran as a desktop app
133 |       </strong>
134 |       .
135 |     </p>
136 |   </div>
137 | </main>
138 | `;
139 | 


--------------------------------------------------------------------------------
/tests/unit/components/ExternalLink.test.js:
--------------------------------------------------------------------------------
 1 | import ExternalLink from '@/components/ExternalLink.vue';
 2 | 
 3 | import testHelpers from '@@/unit/testHelpers.js';
 4 | 
 5 | describe('ExternalLink.vue', () => {
 6 |   // Props
 7 |   const name = 'Test';
 8 |   const url = 'example.com';
 9 | 
10 |   // Data
11 |   const fullUrl = 'https://' + url;
12 | 
13 |   beforeEach(() => {
14 |     global.vueSnapshots.formatting.attributesPerLine = 2;
15 |     global.vueSnapshots.formatting.tagsWithWhitespacePreserved = ['a'];
16 |   });
17 | 
18 |   const setupWrapper = async () => {
19 |     const requiredProps = { name, url };
20 |     const options = {
21 |       props: requiredProps
22 |     };
23 |     const wrapper = await testHelpers.shallowMount(ExternalLink, options);
24 |     return wrapper;
25 |   };
26 | 
27 |   describe('Desktop', () => {
28 |     test('Render default contents', async () => {
29 |       const wrapper = await setupWrapper();
30 | 
31 |       expect(wrapper)
32 |         .toMatchInlineSnapshot(`
33 |           <a href="#" title="example.com">Test</a>
34 |         `);
35 |     });
36 | 
37 |     test('Click event', async () => {
38 |       const wrapper = await setupWrapper();
39 | 
40 |       await wrapper.find('[data-test="link"]').trigger('click');
41 | 
42 |       expect(window.nw.Shell.openExternal)
43 |         .toHaveBeenCalledWith(fullUrl);
44 |     });
45 |   });
46 | 
47 |   describe('Web', () => {
48 |     beforeEach(() => {
49 |       window.webSetup();
50 |     });
51 | 
52 |     test('Render default contents', async () => {
53 |       const wrapper = await setupWrapper();
54 | 
55 |       expect(wrapper)
56 |         .toMatchInlineSnapshot(`
57 |           <a href="#" title="example.com">Test</a>
58 |         `);
59 |     });
60 | 
61 |     test('Click event', async () => {
62 |       const wrapper = await setupWrapper();
63 | 
64 |       await wrapper.find('[data-test="link"]').trigger('click');
65 | 
66 |       expect(window.open)
67 |         .toHaveBeenCalledWith(fullUrl, '_blank');
68 |     });
69 |   });
70 | });
71 | 


--------------------------------------------------------------------------------
/tests/unit/main.test.js:
--------------------------------------------------------------------------------
1 | import { app } from '@/main.js';
2 | 
3 | describe('main.js', () => {
4 |   test('Creates Vue app', () => {
5 |     expect(app?._component?.name)
6 |       .toEqual('App');
7 |   });
8 | });
9 | 


--------------------------------------------------------------------------------
/tests/unit/setup.js:
--------------------------------------------------------------------------------
 1 | global.document = global.window.document;
 2 | document.body.innerHTML = '<div id="app"></div>';
 3 | const { getComputedStyle } = window;
 4 | 
 5 | // Prevents console log message to install Vue DevTools
 6 | // Vue.config.devtools = false;
 7 | 
 8 | // Monkeypatch JSDOM missing transition styles + vue-test-utils not properly stubbing transitions
 9 | // in globally included libs
10 | // https://github.com/vuejs/vue-test-utils/issues/839#issuecomment-410474714
11 | window.getComputedStyle = function getComputedStyleStub (el) {
12 |   return {
13 |     ...getComputedStyle(el),
14 |     transitionDelay: '',
15 |     transitionDuration: '',
16 |     animationDelay: '',
17 |     animationDuration: ''
18 |   };
19 | };
20 | 
21 | window.webSetup = function () {
22 |   delete window.nw;
23 |   window.open = vi.fn();
24 | };
25 | 
26 | global.beforeEach(() => {
27 |   global.vueSnapshots = {
28 |     formatting: {
29 |       tagsWithWhitespacePreserved: ['pre']
30 |     }
31 |   };
32 |   const showDevTools = vi.fn();
33 |   window.nw = {
34 |     process: {
35 |       cwd: process.cwd,
36 |       env: {
37 |         NODE_ENV: 'development'
38 |       },
39 |       versions: {
40 |         'nw-flavor': 'sdk'
41 |       }
42 |     },
43 |     require: vi.fn((module) => {
44 |       if (module === 'fs') {
45 |         return {
46 |           readdirSync: vi.fn(() => {
47 |             return ['example-file-1.ext', 'example-file-2.ext'];
48 |           })
49 |         };
50 |       }
51 |     }),
52 |     Shell: {
53 |       openExternal: vi.fn()
54 |     },
55 |     Window: {
56 |       get: vi.fn(() => {
57 |         return {
58 |           showDevTools
59 |         };
60 |       })
61 |     }
62 |   };
63 |   window.open = vi.fn();
64 | });
65 | 
66 | global.afterEach(() => {
67 |   if (window.nw) {
68 |     window.nw.Window.get().showDevTools.mockClear();
69 |   }
70 | });
71 | 


--------------------------------------------------------------------------------
/tests/unit/testHelpers.js:
--------------------------------------------------------------------------------
 1 | import { createTestingPinia } from '@pinia/testing';
 2 | import { mount, shallowMount } from '@vue/test-utils';
 3 | import constantsPlugin from 'vue-options-api-constants-plugin';
 4 | 
 5 | import { router } from '@/router/index.js';
 6 | 
 7 | import applyPrototypes from '@/helpers/applyPrototypes.js';
 8 | 
 9 | const pinia = createTestingPinia({ stubActions: false });
10 | 
11 | export default {
12 |   setupOptions: function (options) {
13 |     options = options || {};
14 |     options.global = options.global || {};
15 | 
16 |     options.global.config = options.global.config || {};
17 |     options.global.config.globalProperties = options.global.config.globalProperties || {};
18 |     applyPrototypes(options.global.config.globalProperties);
19 | 
20 |     options.global.plugins = [
21 |       constantsPlugin,
22 |       pinia,
23 |       router
24 |     ];
25 | 
26 |     return options;
27 |   },
28 |   shallowMount: function (component, options) {
29 |     options = this.setupOptions(options);
30 |     const wrapper = shallowMount(component, options);
31 |     return wrapper;
32 |   },
33 |   mount: function (component, options) {
34 |     options = this.setupOptions(options);
35 |     const wrapper = mount(component, options);
36 |     return wrapper;
37 |   }
38 | };
39 | 


--------------------------------------------------------------------------------
/tests/unit/views/FsExample.test.js:
--------------------------------------------------------------------------------
 1 | import FsExample from '@/views/FsExample.vue';
 2 | 
 3 | import testHelpers from '@@/unit/testHelpers.js';
 4 | 
 5 | describe('FsExample.vue', () => {
 6 |   const setupWrapper = async () => {
 7 |     const wrapper = await testHelpers.shallowMount(FsExample);
 8 |     return wrapper;
 9 |   };
10 | 
11 |   describe('Desktop', () => {
12 |     test('Render default contents', async () => {
13 |       const wrapper = await setupWrapper();
14 | 
15 |       expect(wrapper)
16 |         .toMatchSnapshot();
17 |     });
18 | 
19 |     test('Click button', async () => {
20 |       const wrapper = await setupWrapper();
21 | 
22 |       const button = wrapper.find('[data-test="fsExampleButton"]');
23 |       await button.trigger('click');
24 | 
25 |       expect(window.nw.require)
26 |         .toHaveBeenCalledWith('fs');
27 | 
28 |       expect(wrapper)
29 |         .toMatchSnapshot();
30 |     });
31 | 
32 |     test('Error state', async () => {
33 |       window.nw.require.mockImplementation((module) => {
34 |         if (module === 'fs') {
35 |           return new Error();
36 |         }
37 |       });
38 | 
39 |       const wrapper = await setupWrapper();
40 | 
41 |       const button = wrapper.find('[data-test="fsExampleButton"]');
42 |       await button.trigger('click');
43 | 
44 |       expect(window.nw.require)
45 |         .toHaveBeenCalledWith('fs');
46 | 
47 |       expect(wrapper)
48 |         .toMatchSnapshot();
49 |     });
50 |   });
51 | 
52 |   describe('Web', () => {
53 |     beforeEach(() => {
54 |       window.webSetup();
55 |     });
56 | 
57 |     test('Render default contents', async () => {
58 |       const wrapper = await setupWrapper();
59 | 
60 |       expect(wrapper)
61 |         .toMatchSnapshot();
62 |     });
63 | 
64 |     test('Button function inaccessible', async () => {
65 |       const wrapper = await setupWrapper();
66 | 
67 |       await wrapper.vm.getCurrentDirectory();
68 | 
69 |       expect(wrapper.vm.error)
70 |         .toEqual(false);
71 | 
72 |       expect(wrapper.vm.contents)
73 |         .toEqual([]);
74 |     });
75 |   });
76 | });
77 | 


--------------------------------------------------------------------------------
/tests/unit/views/HelloWorld.test.js:
--------------------------------------------------------------------------------
 1 | import HelloWorld from '@/views/HelloWorld.vue';
 2 | 
 3 | import testHelpers from '@@/unit/testHelpers.js';
 4 | 
 5 | describe('HelloWorld.vue', () => {
 6 |   const setupWrapper = async () => {
 7 |     const wrapper = await testHelpers.shallowMount(HelloWorld);
 8 |     return wrapper;
 9 |   };
10 | 
11 |   describe('Desktop', () => {
12 |     test('Render default contents', async () => {
13 |       const wrapper = await setupWrapper();
14 | 
15 |       expect(wrapper)
16 |         .toMatchSnapshot();
17 |     });
18 | 
19 |     test('App name and message displays correctly', async () => {
20 |       const wrapper = await setupWrapper();
21 | 
22 |       expect(wrapper.find('[data-test="appName"]').text())
23 |         .toEqual('Your App Name Here');
24 | 
25 |       expect(wrapper.find('[data-test="message"]').text())
26 |         .toEqual('NW.js & Vue Boilerplate');
27 |     });
28 | 
29 |     test('Open dev tools', async () => {
30 |       const wrapper = await setupWrapper();
31 | 
32 |       const button = wrapper.find('[data-test="devToolsButton"]');
33 |       await button.trigger('click');
34 | 
35 |       expect(window.nw.Window.get().showDevTools)
36 |         .toHaveBeenCalled();
37 |     });
38 | 
39 |     test('App opens in default browser', async () => {
40 |       const wrapper = await setupWrapper();
41 | 
42 |       const button = wrapper.find('[data-test="openAppInBrowserButton"]');
43 |       await button.trigger('click');
44 | 
45 |       expect(window.nw.Shell.openExternal)
46 |         .toHaveBeenCalledWith('http://localhost:3000/#/');
47 |     });
48 |   });
49 | 
50 |   describe('Web', () => {
51 |     beforeEach(() => {
52 |       window.webSetup();
53 |     });
54 | 
55 |     test('Render default contents', async () => {
56 |       const wrapper = await setupWrapper();
57 | 
58 |       expect(wrapper)
59 |         .toMatchSnapshot();
60 |     });
61 | 
62 |     test('Message displays correctly', async () => {
63 |       const wrapper = await setupWrapper();
64 | 
65 |       expect(wrapper.find('[data-test="message"]').text())
66 |         .toEqual('Vue Boilerplate');
67 |     });
68 |   });
69 | });
70 | 


--------------------------------------------------------------------------------
/tests/unit/views/PiniaDemo.test.js:
--------------------------------------------------------------------------------
 1 | import PiniaDemo from '@/views/PiniaDemo.vue';
 2 | 
 3 | import testHelpers from '@@/unit/testHelpers.js';
 4 | 
 5 | describe('PiniaDemo.vue', () => {
 6 |   const setupWrapper = async () => {
 7 |     const wrapper = await testHelpers.mount(PiniaDemo);
 8 |     wrapper.vm.counterStore.resetState();
 9 |     return wrapper;
10 |   };
11 | 
12 |   describe('Desktop', () => {
13 |     test('Render default contents', async () => {
14 |       const wrapper = await setupWrapper();
15 | 
16 |       expect(wrapper)
17 |         .toMatchSnapshot();
18 |     });
19 | 
20 |     test('Click increment', async () => {
21 |       const wrapper = await setupWrapper();
22 | 
23 |       const button = wrapper.find('[data-test="incrementButton"]');
24 |       await button.trigger('click');
25 | 
26 |       expect(wrapper)
27 |         .toMatchSnapshot();
28 |     });
29 |   });
30 | 
31 |   describe('Web', () => {
32 |     beforeEach(() => {
33 |       window.webSetup();
34 |     });
35 | 
36 |     test('Render default contents', async () => {
37 |       const wrapper = await setupWrapper();
38 | 
39 |       expect(wrapper)
40 |         .toMatchSnapshot();
41 |     });
42 | 
43 |     test('Click increment', async () => {
44 |       const wrapper = await setupWrapper();
45 | 
46 |       const button = wrapper.find('[data-test="incrementButton"]');
47 |       await button.trigger('click');
48 | 
49 |       expect(wrapper)
50 |         .toMatchSnapshot();
51 |     });
52 |   });
53 | });
54 | 


--------------------------------------------------------------------------------
/tests/unit/views/__snapshots__/FsExample.test.js.snap:
--------------------------------------------------------------------------------
 1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 2 | 
 3 | exports[`FsExample.vue > Desktop > Click button 1`] = `
 4 | <div class="container">
 5 |   <h2 class="green">
 6 |     📁 File System Example:
 7 |   </h2>
 8 |   <!-- v-if -->
 9 |   <button>
10 |     Click for File System example
11 |   </button>
12 |   <p>
13 |     <strong>
14 |       The contents of the current working directory:
15 |     </strong>
16 |   </p>
17 |   <ul class="columns">
18 |     <li>
19 |       example-file-1.ext
20 |     </li>
21 |     <li>
22 |       example-file-2.ext
23 |     </li>
24 |   </ul>
25 | </div>
26 | `;
27 | 
28 | exports[`FsExample.vue > Desktop > Error state 1`] = `
29 | <div class="container">
30 |   <h2 class="green">
31 |     📁 File System Example:
32 |   </h2>
33 |   <div>
34 |     There was an error attempting to read from the file system.
35 |   </div>
36 |   <button>
37 |     Try again for File System example
38 |   </button>
39 |   <!-- v-if -->
40 | </div>
41 | `;
42 | 
43 | exports[`FsExample.vue > Desktop > Render default contents 1`] = `
44 | <div class="container">
45 |   <h2 class="green">
46 |     📁 File System Example:
47 |   </h2>
48 |   <!-- v-if -->
49 |   <button>
50 |     Click for File System example
51 |   </button>
52 |   <!-- v-if -->
53 | </div>
54 | `;
55 | 
56 | exports[`FsExample.vue > Web > Render default contents 1`] = `<!-- v-if -->`;
57 | 


--------------------------------------------------------------------------------
/tests/unit/views/__snapshots__/HelloWorld.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
  2 | 
  3 | exports[`HelloWorld.vue > Desktop > Render default contents 1`] = `
  4 | <div class="greetings">
  5 |   <div class="logos">
  6 |     <img
  7 |       alt="NW.js logo"
  8 |       src="/src/assets/nw.png"
  9 |     />
 10 |     <img
 11 |       alt="Vue logo"
 12 |       src="/src/assets/logo.svg"
 13 |     />
 14 |   </div>
 15 |   <h1 class="green">
 16 |     Your App Name Here
 17 |   </h1>
 18 |   <h2 class="green">
 19 |     NW.js &amp; Vue Boilerplate
 20 |   </h2>
 21 |   <h3>
 22 |     This boilerplate uses
 23 |     <external-link-stub
 24 |       name="NW.js"
 25 |       url="nwjs.io"
 26 |     ></external-link-stub>
 27 |     +
 28 |     <external-link-stub
 29 |       name="Vite"
 30 |       url="vitejs.dev"
 31 |     ></external-link-stub>
 32 |     +
 33 |     <external-link-stub
 34 |       name="Vue 3"
 35 |       url="vuejs.org"
 36 |     ></external-link-stub>
 37 |     +
 38 |     <external-link-stub
 39 |       name="Pinia"
 40 |       url="pinia.vuejs.org"
 41 |     ></external-link-stub>
 42 |     +
 43 |     <external-link-stub
 44 |       name="Vue-Router"
 45 |       url="router.vuejs.org"
 46 |     ></external-link-stub>
 47 |     + the
 48 |     <external-link-stub
 49 |       name="superior Options API"
 50 |       url="docs.google.com/presentation/d/1fsDhn_MptD6c-_ALgurQtvaRFkfbfukbbFGfEfckzvk/edit?usp=sharing"
 51 |     ></external-link-stub>
 52 |     .
 53 |   </h3>
 54 |   <div class="
 55 |     center
 56 |     mt-1
 57 |   ">
 58 |     <p class="container">
 59 |       <button>
 60 |         Open DevTools
 61 |       </button>
 62 |     </p>
 63 |     <p class="container">
 64 |       <button>
 65 |         Open App in default browser
 66 |       </button>
 67 |     </p>
 68 |   </div>
 69 | </div>
 70 | `;
 71 | 
 72 | exports[`HelloWorld.vue > Web > Render default contents 1`] = `
 73 | <div class="greetings">
 74 |   <div class="logos">
 75 |     <!-- v-if -->
 76 |     <img
 77 |       alt="Vue logo"
 78 |       src="/src/assets/logo.svg"
 79 |     />
 80 |   </div>
 81 |   <h1 class="green">
 82 |     Your App Name Here
 83 |   </h1>
 84 |   <h2 class="green">
 85 |     Vue Boilerplate
 86 |   </h2>
 87 |   <h3>
 88 |     This boilerplate uses
 89 |     <external-link-stub
 90 |       name="NW.js"
 91 |       url="nwjs.io"
 92 |     ></external-link-stub>
 93 |     +
 94 |     <external-link-stub
 95 |       name="Vite"
 96 |       url="vitejs.dev"
 97 |     ></external-link-stub>
 98 |     +
 99 |     <external-link-stub
100 |       name="Vue 3"
101 |       url="vuejs.org"
102 |     ></external-link-stub>
103 |     +
104 |     <external-link-stub
105 |       name="Pinia"
106 |       url="pinia.vuejs.org"
107 |     ></external-link-stub>
108 |     +
109 |     <external-link-stub
110 |       name="Vue-Router"
111 |       url="router.vuejs.org"
112 |     ></external-link-stub>
113 |     + the
114 |     <external-link-stub
115 |       name="superior Options API"
116 |       url="docs.google.com/presentation/d/1fsDhn_MptD6c-_ALgurQtvaRFkfbfukbbFGfEfckzvk/edit?usp=sharing"
117 |     ></external-link-stub>
118 |     .
119 |   </h3>
120 |   <p>
121 |     Notice that the
122 |     <strong>
123 |       same app conditionally renders
124 |     </strong>
125 |     different content in a normal browser than
126 |     <strong>
127 |       when ran as a desktop app
128 |     </strong>
129 |     .
130 |   </p>
131 | </div>
132 | `;
133 | 


--------------------------------------------------------------------------------
/tests/unit/views/__snapshots__/PiniaDemo.test.js.snap:
--------------------------------------------------------------------------------
  1 | // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
  2 | 
  3 | exports[`PiniaDemo.vue > Desktop > Click increment 1`] = `
  4 | <div class="
  5 |   container
  6 |   mb-2
  7 | ">
  8 |   <h2 class="green">
  9 |     🍍 Pinia Example:
 10 |   </h2>
 11 |   <ul>
 12 |     <li>
 13 |       <strong>
 14 |         Count:
 15 |       </strong>
 16 |       3
 17 |     </li>
 18 |     <li>
 19 |       <strong>
 20 |         Doubled Count:
 21 |       </strong>
 22 |       6
 23 |     </li>
 24 |     <li>
 25 |       <button>
 26 |         Increment Count
 27 |       </button>
 28 |     </li>
 29 |   </ul>
 30 | </div>
 31 | `;
 32 | 
 33 | exports[`PiniaDemo.vue > Desktop > Render default contents 1`] = `
 34 | <div class="
 35 |   container
 36 |   mb-2
 37 | ">
 38 |   <h2 class="green">
 39 |     🍍 Pinia Example:
 40 |   </h2>
 41 |   <ul>
 42 |     <li>
 43 |       <strong>
 44 |         Count:
 45 |       </strong>
 46 |       2
 47 |     </li>
 48 |     <li>
 49 |       <strong>
 50 |         Doubled Count:
 51 |       </strong>
 52 |       4
 53 |     </li>
 54 |     <li>
 55 |       <button>
 56 |         Increment Count
 57 |       </button>
 58 |     </li>
 59 |   </ul>
 60 | </div>
 61 | `;
 62 | 
 63 | exports[`PiniaDemo.vue > Web > Click increment 1`] = `
 64 | <div class="
 65 |   container
 66 |   mb-2
 67 | ">
 68 |   <h2 class="green">
 69 |     🍍 Pinia Example:
 70 |   </h2>
 71 |   <ul>
 72 |     <li>
 73 |       <strong>
 74 |         Count:
 75 |       </strong>
 76 |       3
 77 |     </li>
 78 |     <li>
 79 |       <strong>
 80 |         Doubled Count:
 81 |       </strong>
 82 |       6
 83 |     </li>
 84 |     <li>
 85 |       <button>
 86 |         Increment Count
 87 |       </button>
 88 |     </li>
 89 |   </ul>
 90 | </div>
 91 | `;
 92 | 
 93 | exports[`PiniaDemo.vue > Web > Render default contents 1`] = `
 94 | <div class="
 95 |   container
 96 |   mb-2
 97 | ">
 98 |   <h2 class="green">
 99 |     🍍 Pinia Example:
100 |   </h2>
101 |   <ul>
102 |     <li>
103 |       <strong>
104 |         Count:
105 |       </strong>
106 |       2
107 |     </li>
108 |     <li>
109 |       <strong>
110 |         Doubled Count:
111 |       </strong>
112 |       4
113 |     </li>
114 |     <li>
115 |       <button>
116 |         Increment Count
117 |       </button>
118 |     </li>
119 |   </ul>
120 | </div>
121 | `;
122 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url';
 2 | 
 3 | import vue from '@vitejs/plugin-vue';
 4 | import { defineConfig } from 'vite';
 5 | import vueDevTools from 'vite-plugin-vue-devtools';
 6 | import { configDefaults } from 'vitest/dist/config.js';
 7 | 
 8 | // https://vitejs.dev/config/
 9 | export default defineConfig({
10 |   build: {
11 |     // Make sure this matches the Chromium version built into NW.js
12 |     target: 'chrome137',
13 |     outDir: 'dist-vue'
14 |   },
15 |   plugins: [
16 |     vue(),
17 |     vueDevTools()
18 |   ],
19 |   resolve: {
20 |     alias: {
21 |       '@': fileURLToPath(new URL('./src', import.meta.url)),
22 |       '@@': fileURLToPath(new URL('./tests', import.meta.url))
23 |     }
24 |   },
25 |   test: {
26 |     globals: true,
27 |     environment: 'happy-dom',
28 |     coverage: {
29 |       exclude: [
30 |         ...(configDefaults?.coverage?.exclude || []),
31 |         '**/dist-vue/**',
32 |         './server.cjs'
33 |       ],
34 |       reportsDirectory: './tests/unit/coverage'
35 |     },
36 |     root: '.',
37 |     setupFiles: [
38 |       './tests/unit/setup.js'
39 |     ],
40 |     snapshotSerializers: [
41 |       './node_modules/vue3-snapshot-serializer/index.js'
42 |     ]
43 |   }
44 | });
45 | 


--------------------------------------------------------------------------------
/waitOnConfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "headers": {
3 |     "accept": "text/html"
4 |   }
5 | }
6 | 


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