Skip to content

Commit

Permalink
Add Vue-Router
Browse files Browse the repository at this point in the history
  • Loading branch information
TheJaredWilcurt authored Aug 25, 2023
1 parent aad62d9 commit c009a42
Show file tree
Hide file tree
Showing 22 changed files with 266 additions and 311 deletions.
1 change: 1 addition & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -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
Expand Down
17 changes: 10 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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"`

Expand All @@ -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
Expand All @@ -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"
Expand Down
35 changes: 29 additions & 6 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 10 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
104 changes: 35 additions & 69 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -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>
19 changes: 12 additions & 7 deletions src/assets/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}
}
1 change: 1 addition & 0 deletions src/helpers/constants.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const APP_NAME = 'Your App Name Here';
5 changes: 5 additions & 0 deletions src/main.js
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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');
Loading

0 comments on commit c009a42

Please sign in to comment.