├── .gitignore
├── static
    └── logo.png
├── src
    ├── renderer
    │   ├── assets
    │   │   └── main.css
    │   ├── pages
    │   │   └── index.vue
    │   └── components
    │   │   └── Logo.vue
    └── main
    │   └── index.ts
├── typings
    └── vue.d.ts
├── tsconfig.main.json
├── tsconfig.json
├── nuxt.config.ts
├── LICENSE
├── README.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/static/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Exeteres/electron-nuxt-ts/HEAD/static/logo.png


--------------------------------------------------------------------------------
/src/renderer/assets/main.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css?family=Roboto:100");
2 | 


--------------------------------------------------------------------------------
/typings/vue.d.ts:
--------------------------------------------------------------------------------
1 | declare module "*.vue" {
2 |     import Vue from "vue";
3 |     export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/tsconfig.main.json:
--------------------------------------------------------------------------------
1 | {
2 |     "extends": "./tsconfig.json",
3 |     "compilerOptions": {
4 |         "module": "commonjs"
5 |     },
6 |     "include": ["src/main/**/*.ts"]
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "outDir": "dist/main",
 4 |         "module": "esnext",
 5 |         "target": "es2018",
 6 |         "moduleResolution": "node",
 7 |         "esModuleInterop": true,
 8 |         "experimentalDecorators": true,
 9 |         "baseUrl": ".",
10 |         "paths": {
11 |             "~/*": ["./src/renderer/*"],
12 |             "@/*": ["./src/renderer/*"]
13 |         },
14 |         "types": ["@types/node", "@nuxt/types"]
15 |     }
16 | }
17 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { Configuration } from "@nuxt/types";
 2 | 
 3 | const config: Configuration = {
 4 |     mode: "spa",
 5 |     buildDir: "dist/.nuxt",
 6 |     generate: { dir: "dist/renderer" },
 7 |     css: ["~/assets/main.css"],
 8 |     srcDir: "src/renderer",
 9 |     build: {
10 |         extend(config, { isClient }) {
11 |             if (isClient) {
12 |                 config.target = "electron-renderer";
13 |             }
14 |         }
15 |     },
16 |     buildModules: ["@nuxt/typescript-build"]
17 | };
18 | 
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/src/renderer/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <div class="row">
 4 |             <div style="flex: 40%;">
 5 |                 <logo />
 6 |             </div>
 7 |             <div style="flex: 60%;">
 8 |                 <h1>Electron Nuxt TypeScript</h1>
 9 |                 <p>Electron: {{ versions.electron }}</p>
10 |                 <p>Chrome: {{ versions.chrome }}</p>
11 |                 <p>Node: {{ versions.node }}</p>
12 |             </div>
13 |         </div>
14 |     </div>
15 | </template>
16 | 
17 | <script lang="ts">
18 | import Vue from "vue";
19 | import Component from "nuxt-class-component";
20 | import Logo from "~/components/Logo.vue";
21 | import { remote } from "electron";
22 | 
23 | @Component({ components: { Logo } })
24 | export default class Index extends Vue {
25 |     readonly versions = remote.process.versions;
26 | }
27 | </script>
28 | 
29 | <style>
30 | body {
31 |     font-family: "Roboto";
32 | }
33 | .row {
34 |     display: flex;
35 | }
36 | 
37 | .logo-container {
38 |     position: relative;
39 | }
40 | 
41 | .centered {
42 |     text-align: center;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Exeteres
 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 | # Electron Nuxt TypeScript
 2 | 
 3 | <p align="center"><img src="static/logo.png"></p>
 4 | 
 5 | ## Legacy version
 6 | 
 7 | See [legacy](https://github.com/Exeteres/electron-nuxt-ts/tree/legacy) branch. Please note that this version uses the very old version of nuxt.
 8 | 
 9 | ## Features
10 | 
11 | - Everything is fully written in TypeScript, even configs
12 | - Class Component API
13 | - Simple and minimalist file structure
14 | - Vue + Nuxt devtools
15 | - Full nuxt server and compiler with hot reloading and preprocessors
16 | - Supporting native node addons out of the box
17 | - Powerful production build using electron-builder
18 | 
19 | ## Installation
20 | 
21 | Due to maintain difficulties, the installation via `vue-cli` has been removed. Now this repository is a template. Just clone it.
22 | 
23 | ```shell
24 | git clone https://github.com/exeteres/electron-nuxt-ts
25 | ```
26 | 
27 | ## FAQ
28 | 
29 | - [How to use preprocessors?](https://nuxtjs.org/faq/pre-processors)
30 | - [How to add a Vuex store?](https://typescript.nuxtjs.org/cookbook/store)
31 | - [How to use Options API or Composition API?](https://typescript.nuxtjs.org/cookbook/components)
32 | 


--------------------------------------------------------------------------------
/src/main/index.ts:
--------------------------------------------------------------------------------
 1 | import { app, BrowserWindow } from "electron";
 2 | 
 3 | import waitOn from "wait-on";
 4 | import express from "express";
 5 | import getPort from "get-port";
 6 | import useragent from "express-useragent";
 7 | import { resolve } from "path";
 8 | 
 9 | let win: BrowserWindow;
10 | 
11 | function loadContent(port = 3000) {
12 |     win = new BrowserWindow({
13 |         webPreferences: {
14 |             nodeIntegration: true
15 |         }
16 |     });
17 |     win.loadURL(`http://localhost:${port}`);
18 | }
19 | 
20 | app.on("ready", async () => {
21 |     if (process.env.NODE_ENV === "development") {
22 |         // Importing dev dependencies
23 |         const devtools = await import("electron-devtools-installer");
24 | 
25 |         // Installing devtools
26 |         await devtools.default(devtools.VUEJS_DEVTOOLS);
27 | 
28 |         // Waiting for web server
29 |         waitOn({ resources: [`http://localhost:3000`] }, loadContent);
30 |     } else {
31 |         const server = express();
32 |         server.use(useragent.express());
33 | 
34 |         // Rejecting requests from browsers
35 |         server.use((req, res, next) => {
36 |             if (req.useragent.source.includes("Electron")) next();
37 |             else res.end();
38 |         });
39 | 
40 |         server.use(express.static(resolve(__dirname, "../renderer")));
41 | 
42 |         const port = await getPort();
43 |         server.listen(port, "localhost", () => loadContent(port));
44 |     }
45 | });
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "electron-nuxt-ts",
 3 |     "author": "Exeteres",
 4 |     "description": "Electron + Nuxt + Typescript",
 5 |     "version": "0.0.1",
 6 |     "main": "dist/main",
 7 |     "build": {
 8 |         "appId": "com.example.app",
 9 |         "files": [
10 |             {
11 |                 "from": "dist",
12 |                 "to": "dist",
13 |                 "filter": [
14 |                     "main/**/*",
15 |                     "renderer/**/*"
16 |                 ]
17 |             },
18 |             {
19 |                 "from": ".",
20 |                 "filter": [
21 |                     "package.json"
22 |                 ]
23 |             }
24 |         ]
25 |     },
26 |     "scripts": {
27 |         "build:main": "tsc -p tsconfig.main.json",
28 |         "build:dist": "nuxt-ts generate && yarn build:main",
29 |         "build:pack": "electron-builder",
30 |         "build": "yarn build:dist && yarn build:pack",
31 |         "dev": "yarn build:main && concurrently -k -n main,renderer -c blue,green \"cross-env NODE_ENV=development electron .\" \"nuxt-ts dev\""
32 |     },
33 |     "devDependencies": {
34 |         "@nuxt/typescript-build": "^0.6.6",
35 |         "@types/electron-devtools-installer": "^2.2.0",
36 |         "@types/express": "^4.16.0",
37 |         "@types/express-useragent": "^1.0.0",
38 |         "@types/node": "^12.7.11",
39 |         "@types/wait-on": "^4.0.0",
40 |         "concurrently": "^5.2.0",
41 |         "cross-env": "^7.0.2",
42 |         "electron": "^8.5.2",
43 |         "electron-builder": "^22.6.0",
44 |         "electron-devtools-installer": "^3.0.0",
45 |         "nuxt": "^2.12.2",
46 |         "typescript": "~3.8.3"
47 |     },
48 |     "license": "MIT",
49 |     "dependencies": {
50 |         "@nuxt/typescript-runtime": "^0.4.6",
51 |         "express": "^4.16.4",
52 |         "express-useragent": "^1.0.13",
53 |         "get-port": "^5.1.1",
54 |         "nuxt-class-component": "^1.3.0",
55 |         "wait-on": "^5.0.0"
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/renderer/components/Logo.vue:
--------------------------------------------------------------------------------
  1 | <!-- https://electronjs.org/ -->
  2 | <!-- https://github.com/nuxt/nuxtjs.org/blob/master/components/VueToNuxtLogo.vue -->
  3 | 
  4 | <template>
  5 |     <div class="hero">
  6 |         <div class="VueToNuxtLogo">
  7 |             <div class="Triangle Triangle--two"></div>
  8 |             <div class="Triangle Triangle--one"></div>
  9 |             <div class="Triangle Triangle--three"></div>
 10 |             <div class="Triangle Triangle--four"></div>
 11 |         </div>
 12 |         <svg
 13 |             class="logo"
 14 |             viewBox="-10 -10 210 310"
 15 |             xmlns="http://www.w3.org/2000/svg"
 16 |         >
 17 |             <g fill="none" fill-rule="evenodd">
 18 |                 <g class="hero-icons">
 19 |                     <path
 20 |                         class="hero-icon hero-icon-1 hero-icon--line"
 21 |                         d="M67.9100478,46.533669 C41.4232923,41.7095462 19.6934451,46.302143 11.3075829,
 22 |                             60.8268822 C5.08594528,71.6030748 7.27151972,86.0067879 15.9285936,101.106252"
 23 |                     />
 24 |                     <path
 25 |                         class="hero-icon hero-icon-2 hero-icon--line"
 26 |                         d="M30.2849913,120.46661 C41.243568,132.509273 55.7667544,
 27 |                         144.206588 72.8846905,154.089633 C113.69002,177.648601 156.051349,183.283871 176.168455,169.566881"
 28 |                     />
 29 |                     <circle
 30 |                         class="hero-icon hero-icon-3 hero-icon--circle"
 31 |                         cx="185"
 32 |                         cy="163"
 33 |                         r="11"
 34 |                     />
 35 | 
 36 |                     <path
 37 |                         class="hero-icon hero-icon-4 hero-icon--line"
 38 |                         d="M168.712085,117.011934 C186.053192,96.5261231 192.894725,75.4688937 184.526327,
 39 |                         60.9744031 C178.406575,50.3746817 165.18029,45.0644667 148.184837,44.8434393"
 40 |                     />
 41 |                     <path
 42 |                         class="hero-icon hero-icon-5 hero-icon--line"
 43 |                         d="M123.879401,47.4832579 C107.838006,50.9201969 90.2641836,57.6854858 72.9698617,
 44 |                         67.6703673 C30.9602155,91.9246478 4.57811277,127.105828 8.15869375,151.502356"
 45 |                     />
 46 |                     <circle
 47 |                         class="hero-icon hero-icon-6 hero-icon--circle"
 48 |                         cx="11"
 49 |                         cy="163"
 50 |                         r="11"
 51 |                     />
 52 | 
 53 |                     <path
 54 |                         class="hero-icon hero-icon-7 hero-icon--line"
 55 |                         d="M57.2996169,169.094663 C66.3669653,194.413962 81.1998943,210.912475 97.9595403,
 56 |                         210.912475 C110.104945,210.912475 121.238508,202.248064 129.899251,187.841199"
 57 |                     />
 58 |                     <path
 59 |                         class="hero-icon hero-icon-8 hero-icon--line"
 60 |                         d="M140.356454,163.91057 C145.161419,148.555719 147.938898,130.403455 147.938898,
 61 |                         110.95376 C147.938898,63.2217718 131.210891,23.3038536 108.840161,13.3705693"
 62 |                     />
 63 |                     <circle
 64 |                         class="hero-icon hero-icon-9 hero-icon--circle"
 65 |                         cx="98"
 66 |                         cy="12"
 67 |                         r="11"
 68 |                     />
 69 |                 </g>
 70 |             </g>
 71 |         </svg>
 72 |     </div>
 73 | </template>
 74 | 
 75 | <style>
 76 | .hero {
 77 |     position: relative;
 78 | }
 79 | 
 80 | .logo {
 81 |     position: absolute;
 82 |     width: 300px;
 83 | }
 84 | 
 85 | .hero-icon {
 86 |     transform-origin: 50% 50%;
 87 |     stroke: #9feaf9;
 88 |     stroke-width: 5;
 89 |     stroke-linecap: round;
 90 | }
 91 | 
 92 | .hero-icon--line {
 93 |     stroke-dasharray: 170;
 94 |     stroke-dashoffset: 170;
 95 | }
 96 | 
 97 | .hero-icon--circle {
 98 |     stroke-dasharray: 70;
 99 |     stroke-dashoffset: 70;
100 | }
101 | 
102 | .hero-icon-1 {
103 |     animation: hero-icon-animation 1s 3.2s cubic-bezier(0.05, 0.35, 0.2, 1)
104 |         forwards;
105 | }
106 | 
107 | .hero-icon-2 {
108 |     animation: hero-icon-animation 1s 3.3s cubic-bezier(0.05, 0.35, 0.2, 1)
109 |         forwards;
110 | }
111 | 
112 | .hero-icon-3 {
113 |     animation: hero-icon-animation 1s 3.4s cubic-bezier(0.05, 0.35, 0.2, 1)
114 |         forwards;
115 | }
116 | 
117 | .hero-icon-4 {
118 |     animation: hero-icon-animation 1s 3.5s cubic-bezier(0.05, 0.35, 0.2, 1)
119 |         forwards;
120 | }
121 | 
122 | .hero-icon-5 {
123 |     animation: hero-icon-animation 1s 3.6s cubic-bezier(0.05, 0.35, 0.2, 1)
124 |         forwards;
125 | }
126 | 
127 | .hero-icon-6 {
128 |     animation: hero-icon-animation 1s 3.7s cubic-bezier(0.05, 0.35, 0.2, 1)
129 |         forwards;
130 | }
131 | 
132 | .hero-icon-7 {
133 |     animation: hero-icon-animation 1s 3.8s cubic-bezier(0.05, 0.35, 0.2, 1)
134 |         forwards;
135 | }
136 | 
137 | .hero-icon-8 {
138 |     animation: hero-icon-animation 1s 3.9s cubic-bezier(0.05, 0.35, 0.2, 1)
139 |         forwards;
140 | }
141 | 
142 | .hero-icon-9 {
143 |     animation: hero-icon-animation 1s 4s cubic-bezier(0.05, 0.35, 0.2, 1)
144 |         forwards;
145 | }
146 | 
147 | @keyframes hero-icon-animation {
148 |     100% {
149 |         stroke-dashoffset: 0;
150 |     }
151 | }
152 | 
153 | .VueToNuxtLogo {
154 |     top: 60px;
155 |     left: 30px;
156 |     display: inline-block;
157 |     animation: turn 2s linear forwards;
158 |     transform: rotateX(180deg) scale(0.5);
159 |     position: absolute;
160 |     overflow: hidden;
161 |     height: 180px;
162 |     width: 245px;
163 | }
164 | 
165 | .Triangle {
166 |     position: absolute;
167 |     top: 0;
168 |     left: 0;
169 |     width: 0;
170 |     height: 0;
171 | }
172 | .Triangle--one {
173 |     border-left: 105px solid transparent;
174 |     border-right: 105px solid transparent;
175 |     border-bottom: 180px solid #41b883;
176 | }
177 | .Triangle--two {
178 |     top: 30px;
179 |     left: 35px;
180 |     animation: goright 0.5s linear forwards 2.5s;
181 |     border-left: 87.5px solid transparent;
182 |     border-right: 87.5px solid transparent;
183 |     border-bottom: 150px solid #3b8070;
184 | }
185 | .Triangle--three {
186 |     top: 60px;
187 |     left: 35px;
188 |     animation: goright 0.5s linear forwards 2.5s;
189 |     border-left: 70px solid transparent;
190 |     border-right: 70px solid transparent;
191 |     border-bottom: 120px solid #35495e;
192 | }
193 | .Triangle--four {
194 |     top: 120px;
195 |     left: 70px;
196 |     animation: godown 0.5s linear forwards 2s;
197 |     border-left: 35px solid transparent;
198 |     border-right: 35px solid transparent;
199 |     border-bottom: 60px solid #fff;
200 | }
201 | 
202 | @keyframes turn {
203 |     100% {
204 |         transform: rotateX(0deg);
205 |     }
206 | }
207 | @keyframes godown {
208 |     100% {
209 |         top: 180px;
210 |     }
211 | }
212 | @keyframes goright {
213 |     100% {
214 |         left: 70px;
215 |     }
216 | }
217 | </style>
218 | 


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