Vue-Router

.eslintrc.js

@@ -34,6 +34,7 @@ module.exports = {
     'import/no-anonymous-default-export': 'off',
     'import/no-namespace': 'off',
     'import/no-unresolved': 'off',
+    'import/no-unused-modules': 'off',
     'no-restricted-syntax': [
       'error',
       ...baseRestrictedSyntax

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 The Jared Wilcurt
+Copyright (c) 2023 The Jared Wilcurt
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -24,7 +24,9 @@ Run `npm run build` and you're ready to ship/deploy: Web App, Windows Installer,
 * **Vue-DevTools** - Built in to the Chromium dev tools
 * **Vite** - Dev Server/Bundler/App build tool
 * **Pinia** - Global State Management
+* **Vue-Router** - Frontend routing/navigation
 * **Options API** - [Component organizational structure](https://user-images.githubusercontent.com/4629794/204181213-6c9bcece-62fb-4790-8fc2-7df546ca7df5.png)
+* **Constants Plugin** - Gives you a [dedicated place to store constants](https://github.com/TheJaredWilcurt/vue-options-api-constants-plugin) in a component
 * **NW-Builder-Phoenix** - Automated desktop builds
 * **ESLint** - Code error prevention and stylistic consistency
   * Vue Linting
@@ -73,7 +75,7 @@ Or even directly from the template (with some slight changes to work within the
 
 ## Running locally
 
-1. Download/Fork/Clone repo
+1. Download, Fork, or Clone this repo
 1. Install a Node version manager:
    * [volta.sh](https://volta.sh) - Win/Lin/OSX
    * [nvm](https://github.com/nvm-sh/nvm) - Lin/OSX
@@ -114,11 +116,12 @@ They take a long time. If you do `npm run build` expect it to take 10-30 minutes
 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:
 
 * Delete the `/src/store` folder and its contents
-* Delete `/src/components/PiniaDemo.vue`
-* Delete `/tests/unit/components/PiniaDemo.test.js`
-* Remove the lines of code from `/src/App.vue` that contain the text "PiniaDemo"
+* Delete `/src/views/PiniaDemo.vue`
+* Delete `/tests/unit/views/PiniaDemo.test.js`
+* Remove the Pinia Demo `RouterLink` from `/src/App.vue`
+* Remove import and route object relating to "PiniaDemo" from `/src/router/index.js`
+* Remove the lines of code from `/tests/unit/test-helpers.js` that say "pinia"
 * Remove the lines of code from `/package.json` that say "pinia"
-* Remove the lines of code from `/tests/unit/setup.js` that say "pinia"
 * `npm install && npm t -- -u`
 * `git add -A && git commit -m "Removed Pinia"`
 
@@ -134,7 +137,7 @@ This will delete the existing version and download the latest version of Vue-Dev
 
 ## Alternatives
 
-* [nw-vue-cli-example](https://github.com/nwutils/nw-vue-cli-example) - Uses Vue-CLI, has Vue 2 and Vue 3 branches.
+* [nw-vue-cli-example](https://github.com/nwutils/nw-vue-cli-example) - Uses Vue-CLI (WebPack), has Vue 2 and Vue 3 branches.
 * [nwjs-vue](https://github.com/elegantweb/nwjs-vue) - Uses Vue-CLI 2
 * [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
 * [nw-vue3-typescript-pinia](https://github.com/codeh2o/nw-vue3-typescript-pinia) - Fork of this repo but with TS added
@@ -145,7 +148,7 @@ This will delete the existing version and download the latest version of Vue-Dev
 This is not for those *using* this repo, but for those *maintaining* it.
 
 1. When updating the version of NW.js devDependency, also update these:
-   * `package.json` devDeps, build nwVersion
+   * `package.json` version, devDeps, build nwVersion
    * `build.target` in `vite.config.js`
    * Update the Chromium/Node version numbers at the top of the README
    * Update the Node version number in the README "Running Locally"

package.json

@@ -6,14 +6,14 @@
     "To turn spell checking off, remove it from the chromium-args in this file"
   ],
   "name": "your-app-name",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "http://localhost:4175",
   "node-remote": "http://localhost:4175",
   "node-main": "",
   "window": {
     "width": 960,
     "height": 600,
-    "min_width": 700,
+    "min_width": 800,
     "min_height": 500,
     "icon": "public/icon.png"
   },
@@ -28,10 +28,10 @@
     "build:nw": "build --concurrent --tasks win-x86,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
     "build:win": "npm run build:win:clean && npm run build:vue && build --tasks win-x86 --mirror https://dl.nwjs.io/ .",
     "build:lin": "npm run build:lin:clean && npm run build:vue && build --tasks linux-x64 --mirror https://dl.nwjs.io/ .",
-    "build:win:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.2-win-x86 ./dist/your-app-name-1.0.2-win-x86.zip ./dist/your-app-name-1.0.2-win-x86.7z ./dist/your-app-name-1.0.2-win-x86-Setup.exe",
-    "build:lin:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.2-linux-x64 ./dist/your-app-name-1.0.2-linux-x64.zip",
-    "run:win": "dist\\your-app-name-1.0.2-win-x86\\your-app-name.exe",
-    "run:lin": "./dist/your-app-name-1.0.2-linux-x64/your-app-name",
+    "build:win:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.3-win-x86 ./dist/your-app-name-1.0.3-win-x86.zip ./dist/your-app-name-1.0.3-win-x86.7z ./dist/your-app-name-1.0.3-win-x86-Setup.exe",
+    "build:lin:clean": "rimraf ./dist-vue ./dist/your-app-name-1.0.3-linux-x64 ./dist/your-app-name-1.0.3-linux-x64.zip",
+    "run:win": "dist\\your-app-name-1.0.3-win-x86\\your-app-name.exe",
+    "run:lin": "./dist/your-app-name-1.0.3-linux-x64/your-app-name",
     "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",
     "lint": "eslint --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js",
     "fix": "eslint --fix --ext .js,.vue --config=.eslintrc.js src vite.config.js .eslintrc.js",
@@ -42,7 +42,7 @@
     "express": "^4.18.2"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.10",
+    "@babel/eslint-parser": "^7.22.11",
     "@pinia/testing": "^0.1.3",
     "@vitejs/plugin-vue": "^4.3.3",
     "@vitest/coverage-v8": "^0.34.2",
@@ -68,9 +68,11 @@
     "vite": "^4.4.9",
     "vitest": "^0.34.2",
     "vue": "^3.3.4",
+    "vue-options-api-constants-plugin": "^1.0.1",
+    "vue-router": "^4.2.4",
     "wait-on": "^7.0.1"
   },
-  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension'",
+  "chromium-args": "--enable-spell-checking --load-extension='./node_modules/nw-vue-devtools-prebuilt/extension' --disable-features=ProcessPerSiteUpToMainFrameThreshold",
   "build": {
     "nwVersion": "v0.79.0",
     "nwFlavor": "normal",

src/App.vue

@@ -1,89 +1,55 @@
 <template>
   <header>
-    <div class="logos">
-      <img
+    <nav>
+      <RouterLink :to="{ name: 'welcome' }">
+        Welcome
+      </RouterLink>
+      <RouterLink
         v-if="isDesktop"
-        alt="NW.js logo"
-        src="./assets/nw.png"
-      />
-      <img
-        alt="Vue logo"
-        src="./assets/logo.svg"
-      />
-    </div>
-
-    <div class="wrapper">
-      <HelloWorld :message="message" />
-      <hr />
-      <div class="flex">
-        <PiniaDemo />
-        <FsExample />
-      </div>
-    </div>
+        :to="{ name: 'fs' }"
+      >
+        File System Demo
+      </RouterLink>
+      <RouterLink :to="{ name: 'pinia' }">
+        Pinia Demo
+      </RouterLink>
+      <RouterLink :to="{ name: 'resources' }">
+        Resources
+      </RouterLink>
+    </nav>
   </header>
 
   <main>
-    <ResourceLinks />
+    <RouterView />
   </main>
 </template>
 
 <script>
-import FsExample from '@/components/FsExample.vue';
-import HelloWorld from '@/components/HelloWorld.vue';
-import PiniaDemo from '@/components/PiniaDemo.vue';
-import ResourceLinks from '@/components/ResourceLinks.vue';
-
 export default {
-  name: 'App',
-  components: {
-    FsExample,
-    HelloWorld,
-    PiniaDemo,
-    ResourceLinks
-  },
-  computed: {
-    message: function () {
-      let message = 'Vue';
-      if (this.isDesktop) {
-        message = 'NW.js & ' + message;
-      }
-      return message;
-    }
-  }
+  name: 'App'
 };
 </script>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logos {
-  display: block;
+nav {
+  margin-bottom: 2rem;
   text-align: center;
 }
-.logos img {
-  width: 125px;
-  max-width: 125px;
-  max-height: 125px;
-  margin: 0rem 1rem 2rem 1rem;
+nav a {
+  background: #FFF3;
+  border-radius: 0.5rem;
+  margin: 2rem;
+  padding: 0.5rem 1rem;
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: 15px;
-  }
-
-  .logo {
-    margin: 0px 2rem 0px 0px;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+nav a:hover {
+  background: #FFF5;
+  color: #FFF;
+}
+.router-link-active {
+  background: #FFF7;
+  color: #FFF;
+}
+.router-link-active:hover {
+  background: #FFF8;
 }
 </style>

src/assets/main.css

@@ -37,6 +37,16 @@ hr {
   margin: 15px 0px;
 }
 
+textarea {
+  width: 100%;
+  min-height: 15rem;
+  background: #333;
+  border: 0px;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  color: #CCC;
+}
+
 .flex {
   display: flex;
 }
@@ -68,12 +78,7 @@ hr {
 @media (min-width: 1024px) {
   body {
     display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0px 2rem;
+    flex-direction: row;
+    justify-content: center;
   }
 }

src/helpers/constants.js

@@ -0,0 +1 @@
+export const APP_NAME = 'Your App Name Here';

src/main.js

@@ -1,5 +1,8 @@
 import { createPinia } from 'pinia';
 import { createApp } from 'vue';
+import constantsPlugin from 'vue-options-api-constants-plugin';
+
+import { router } from '@/router/index.js';
 
 import applyPrototypes from '@/helpers/applyPrototypes.js';
 
@@ -10,4 +13,6 @@ import '@/assets/main.css';
 const app = createApp(App);
 applyPrototypes(app.config.globalProperties);
 app.use(createPinia());
+app.use(router);
+app.use(constantsPlugin);
 app.mount('#app');