├── template ├── layouts │ ├── default.vue │ └── README.md ├── assets │ ├── css │ │ ├── color.css │ │ └── global.css │ ├── img │ │ └── logo.png │ └── README.md ├── static │ ├── icon.png │ ├── icons │ │ └── 512x512.png │ └── README.md ├── .gitignore ├── components │ └── README.md ├── pages │ ├── README.md │ └── index.vue ├── plugins │ └── README.md ├── middleware │ └── README.md ├── store │ └── README.md ├── README.md ├── .eslintrc.js ├── package.json ├── nuxt.config.js ├── nuxtService.js └── main.js ├── meta.js ├── LICENSE └── README.md /template/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /template/assets/css/color.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary: #00b786; 3 | --secondary: #8ceaf6; 4 | } 5 | -------------------------------------------------------------------------------- /template/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/electron-template/HEAD/template/static/icon.png -------------------------------------------------------------------------------- /template/assets/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/electron-template/HEAD/template/assets/img/logo.png -------------------------------------------------------------------------------- /template/static/icons/512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nuxt-community/electron-template/HEAD/template/static/icons/512x512.png -------------------------------------------------------------------------------- /template/.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # logs 5 | npm-debug.log 6 | 7 | # Nuxt build 8 | .nuxt 9 | 10 | # Nuxt generate 11 | dist 12 | 13 | # Electron Builder Output 14 | build 15 | 16 | # Mac OS 17 | .DS_Store 18 | -------------------------------------------------------------------------------- /template/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /template/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | This directory contains your Application Layouts. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/views#layouts 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /template/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the .vue files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing 8 | -------------------------------------------------------------------------------- /template/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/assets#webpacked 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /template/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application. 4 | 5 | More information about the usage of this directory in the documentation: 6 | https://nuxtjs.org/guide/plugins 7 | 8 | **This directory is not required, you can delete it if you don't want to use it.** 9 | -------------------------------------------------------------------------------- /template/static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | This directory contains your static files. 4 | Each file inside this directory is mapped to /. 5 | 6 | Example: /static/robots.txt is mapped as /robots.txt. 7 | 8 | More information about the usage of this directory in the documentation: 9 | https://nuxtjs.org/guide/assets#static 10 | 11 | **This directory is not required, you can delete it if you don't want to use it.** 12 | -------------------------------------------------------------------------------- /template/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More information about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /template/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | This directory contains your Vuex Store files. 4 | Vuex Store option is implemented in the Nuxt.js framework. 5 | Creating a index.js file in this directory activate the option in the framework automatically. 6 | 7 | More information about the usage of this directory in the documentation: 8 | https://nuxtjs.org/guide/vuex-store 9 | 10 | **This directory is not required, you can delete it if you don't want to use it.** 11 | -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # {{ name }} 2 | 3 | > {{ description }} 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ npm install # Or yarn install 10 | 11 | # development with vue devtools 12 | $ npm run dev 13 | 14 | # build for production 15 | $ npm run build 16 | 17 | For detailed explanation on how things work, checkout [Nuxt.js](https://github.com/nuxt/nuxt.js), [Electron.js](https://electronjs.org/), and [electron-builder](https://www.electron.build/). 18 | -------------------------------------------------------------------------------- /template/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | browser: true, 5 | node: true 6 | }, 7 | parserOptions: { 8 | parser: 'babel-eslint' 9 | }, 10 | extends: [ 11 | // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention 12 | // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules. 13 | 'plugin:vue/essential' 14 | ], 15 | // required to lint *.vue files 16 | plugins: [ 17 | 'vue' 18 | ], 19 | // add your custom rules here 20 | rules: { 21 | "indent": ["error", "tab"], 22 | "no-tabs": 0 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /template/assets/css/global.css: -------------------------------------------------------------------------------- 1 | @import './color.css'; 2 | html { 3 | font-size: 16px; 4 | word-spacing: 1px; 5 | -ms-text-size-adjust: 100%; 6 | -webkit-text-size-adjust: 100%; 7 | -moz-osx-font-smoothing: grayscale; 8 | -webkit-font-smoothing: antialiased; 9 | box-sizing: border-box; 10 | } 11 | body { 12 | font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 13 | } 14 | *, *:before, *:after { 15 | box-sizing: border-box; 16 | margin: 0; 17 | } 18 | .btn, .pointer { 19 | cursor: pointer; 20 | } 21 | .primary { 22 | color: var(--primary); 23 | } 24 | .secondary { 25 | color: var(--secondary); 26 | } 27 | .btn-primary { 28 | background-color: var(--primary); 29 | color: #fff; 30 | } 31 | .btn-secondary { 32 | background-color: var(--secondary); 33 | color: #000; 34 | } 35 | -------------------------------------------------------------------------------- /meta.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | helpers: { 3 | escape: function(value) { 4 | return value.replace(/'/g, '''); 5 | } 6 | }, 7 | prompts: { 8 | name: { 9 | 'type': 'string', 10 | 'required': true, 11 | 'message': 'Project name' 12 | }, 13 | description: { 14 | 'type': 'string', 15 | 'required': false, 16 | 'message': 'Project description', 17 | 'default': 'Nuxt + Electron' 18 | }, 19 | author: { 20 | 'type': 'string', 21 | 'message': 'Author' 22 | }, 23 | appId: { 24 | 'type': 'string', 25 | 'required': true, 26 | 'message': 'App Id (e.g. com.example.app)' 27 | }, 28 | telemetry:{ 29 | 'type': 'boolean', 30 | 'required': true, 31 | 'message': 'Nuxt Telemetry' 32 | } 33 | }, 34 | completeMessage: '{{#inPlace}}To get started:\n\n npm install # Or yarn\n npm run dev{{else}}To get started:\n\n cd {{destDirName}}\n npm install # Or yarn\n npm run dev{{/inPlace}}' 35 | }; 36 | -------------------------------------------------------------------------------- /template/pages/index.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 19 | 20 | 32 | -------------------------------------------------------------------------------- /template/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "{{ name }}", 3 | "version": "1.0.0", 4 | "description": "{{ description }}", 5 | "author": "{{ author }}", 6 | "private": true, 7 | "main": "main.js", 8 | "build": { 9 | "appId": "{{ appId }}", 10 | "directories": { 11 | "buildResources": "static", 12 | "output": "build" 13 | } 14 | }, 15 | "scripts": { 16 | "dev": "cross-env NODE_ENV=DEV electron .", 17 | "build": "nuxt build && electron-builder" 18 | }, 19 | "dependencies": { 20 | "nuxt": "^2.15.7" 21 | }, 22 | "devDependencies": { 23 | "core-js": "^3.16.1", 24 | "vue": "^2.6.14", 25 | "babel-eslint": "^10.1.0", 26 | "cross-env": "^7.0.3", 27 | "electron": "^13.1.9", 28 | "electron-builder": "^22.11.7", 29 | "electron-devtools-installer": "^3.2.0", 30 | "eslint": "^7.32.0", 31 | "eslint-friendly-formatter": "^4.0.1", 32 | "eslint-loader": "^4.0.2", 33 | "eslint-plugin-vue": "^7.16.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 NUXT 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 |

2 | 3 |

4 | 5 | # Please read this first 👇 6 | 7 | This template might be soon archived, if you are willing to help us maintaining it, please answer to [this issue](https://github.com/nuxt-community/electron-template/issues/41) 8 | 9 | 10 | # electron-template 11 | 12 | A starter project template for use with [vue-cli](https://github.com/vuejs/vue-cli) that combines [Nuxt.js](https://github.com/nuxt/nuxt.js) with [Electron](https://electronjs.org/). 13 | 14 | > For the original clonable (not vue-cli) version use the [git-clone branch](https://github.com/nuxt-community/electron-template/tree/git-clone). 15 | 16 | ## Prerequisites 17 | 18 | The following software must be installed: 19 | * node 8.9.3+ 20 | * npm 5.0+ (or yarn) 21 | * vue-cli 2.1+ (`vue -V`) 22 | 23 | ## Installation 24 | 25 | ``` bash 26 | $ vue init nuxt-community/electron-template my-project 27 | $ cd my-project 28 | # install dependencies 29 | $ npm install # Or yarn 30 | ``` 31 | 32 | ## Usage 33 | 34 | ### Development 35 | 36 | ``` bash 37 | # development with vue devtools 38 | $ npm run dev 39 | ``` 40 | 41 | ### Production 42 | 43 | ``` bash 44 | # build for production using electron-builder 45 | $ npm run build 46 | ``` 47 | -------------------------------------------------------------------------------- /template/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // Whether to collect anonymous telemetry data 4 | telemetry:{{telemetry}}, 5 | 6 | // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode 7 | ssr: false, 8 | 9 | // Global page headers: https://go.nuxtjs.dev/config-head 10 | head: { 11 | title: '{{name}}', 12 | meta: [ 13 | { charset: 'utf-8' }, 14 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 15 | ] 16 | }, 17 | 18 | 19 | // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins 20 | plugins: [ 21 | ], 22 | 23 | // Auto import components: https://go.nuxtjs.dev/config-components 24 | components: true, 25 | 26 | // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules 27 | buildModules: [ 28 | ], 29 | 30 | // Modules: https://go.nuxtjs.dev/config-modules 31 | modules: [ 32 | ], 33 | 34 | // Build Configuration: https://go.nuxtjs.dev/config-build 35 | build: { 36 | extend (config, { isDev, isClient }) { 37 | if (isDev && isClient) { 38 | // Run ESLint on save 39 | config.module.rules.push({ 40 | enforce: 'pre', 41 | test: /\.(js|vue)$/, 42 | loader: 'eslint-loader', 43 | exclude: /(node_modules)/ 44 | }) 45 | } 46 | // use web as target when not using node integration 47 | if (isClient) { config.target = 'web' } 48 | // use electron-renderer as target when node integration is in use 49 | // if (isClient) { config.target = 'electron-renderer' } 50 | } 51 | }, 52 | css: [ 53 | '@/assets/css/global.css' 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /template/nuxtService.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const Config = require(path.join(__dirname,'./nuxt.config')) 3 | const { Nuxt, Builder } = require('nuxt') 4 | const isDev = process.env.NODE_ENV === 'DEV' 5 | 6 | class NuxtService { 7 | constructor () { 8 | const config = {...Config, ...{dev: isDev}, ...{rootDir: __dirname}} 9 | this.nuxt = new Nuxt(config) 10 | } 11 | 12 | /** 13 | * Starts the build process 14 | * 15 | * @method boot 16 | * 17 | * @return {Promise} 18 | */ 19 | build () { 20 | return new Builder(this.nuxt).build() 21 | } 22 | 23 | /** 24 | * Handles the HTTP request by making the appropriate 25 | * response, based upon the URL. 26 | * 27 | * @method render 28 | * 29 | * @param {Object} req 30 | * @param {Object} res 31 | * 32 | * @return {Promise} 33 | */ 34 | render (req, res) { 35 | return this.nuxt.render(req, res) 36 | } 37 | 38 | /** 39 | * Runs the Callback on Nuxt ready hook 40 | * 41 | * @method render 42 | * 43 | * @param {Function} callback 44 | * 45 | * @return {void} 46 | */ 47 | 48 | whenReady(callback) 49 | { 50 | this.nuxt.ready().then(callback) 51 | } 52 | 53 | } 54 | 55 | let nuxt = new NuxtService() 56 | const http = require('http') 57 | 58 | const server = http.createServer((req, res)=>{ 59 | return nuxt.render(req, res) 60 | }) 61 | 62 | server.listen() 63 | 64 | if(isDev) 65 | { 66 | nuxt.build().then(()=>{ 67 | process.send({ 68 | status:'done', 69 | port:server.address().port 70 | }) 71 | }) 72 | } else 73 | { 74 | nuxt.whenReady(()=>process.send({ 75 | status:'done', 76 | port:server.address().port 77 | })) 78 | } 79 | 80 | 81 | -------------------------------------------------------------------------------- /template/main.js: -------------------------------------------------------------------------------- 1 | const isDev = process.env.NODE_ENV === 'DEV' 2 | const path = require('path') 3 | /* 4 | ** Nuxt 5 | */ 6 | 7 | const { fork } = require('child_process'); 8 | 9 | const forked = fork(path.join(__dirname,'./nuxtService.js')); 10 | 11 | /* 12 | ** Electron 13 | */ 14 | 15 | forked.on('message',(message)=>{ 16 | 17 | if( message.status != 'done') 18 | return 19 | 20 | const _NUXT_URL_ = `http://localhost:${message.port}` 21 | 22 | if(isDev) 23 | console.log(`Nuxt working on ${_NUXT_URL_}`) 24 | 25 | let win = null // Current window 26 | const { app, BrowserWindow } = require('electron') 27 | 28 | const createWindow = async () => { 29 | win = new BrowserWindow({ 30 | width: 800, 31 | height: 600, 32 | webSecurity: false, 33 | 34 | // uncommect for node integration 35 | 36 | //webPreferences:{ 37 | // nodeIntegration: true, 38 | // contextIsolation: false, 39 | // enableRemoteModule: true, 40 | //} 41 | }) 42 | 43 | if(isDev) 44 | { 45 | // Install vue dev tool and open chrome dev tools 46 | const { default: installExtension, VUEJS_DEVTOOLS } = require('electron-devtools-installer') 47 | 48 | await installExtension(VUEJS_DEVTOOLS,{ 49 | loadExtensionOptions: { 50 | allowFileAccess: true, 51 | } 52 | }) 53 | win.webContents.openDevTools() 54 | win.maximize() 55 | 56 | //Load Content 57 | await win.loadURL(_NUXT_URL_) 58 | } 59 | else 60 | return win.loadURL(_NUXT_URL_) 61 | } 62 | 63 | app.whenReady().then(async () => { 64 | 65 | await createWindow() 66 | 67 | // If in macOS, Open a window when there are none 68 | app.on('activate', function () { 69 | if (BrowserWindow.getAllWindows().length === 0) createWindow() 70 | }) 71 | }) 72 | 73 | //If not in macOS, Quit Application when all windows are closed 74 | app.on('window-all-closed', function () { 75 | if (process.platform !== 'darwin') app.quit() 76 | }) 77 | }) 78 | --------------------------------------------------------------------------------