Electron/Webpack/Vue.js Snippets - Some snippets that I learned from my todo-list electron app "Electron Notes".

electron-webpack-vuejs.md

layout	title	published	tags
post	Some Electron/Webpack/Vue.js Snippets	true	blog vue electron webpack snippets

Some snippets that I learned from my todo-list electron app "Electron Notes".

Menu for keyboard shortcuts

You have to add a default app menu to make default keyboard shortcuts work. Sounds strange but it is true (at least on mac osx). So if you want to use CMD+C/CMD-V for Copy/Paste in your textareas you have to do that ...

import { Menu } from 'electron'

const template = [
{
    label: app.name,
    submenu: [
        { role: 'about' },
        { role: 'quit' }
    ]
},
{
    label: 'Edit',
    submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' },
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
        { role: 'pasteAndMatchStyle' },
        { role: 'delete' },
        { role: 'selectAll' }
    ]
}]

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Open Dev Tools in Electron (in Production)

Sometimes you need to test something in a final built version of your electron app. You can just automaticaly open the developer tools in every environment and deactivate it again after debugging.

mainWindow.once('ready-to-show', () => {
    mainWindow.maximize()
    mainWindow.show()

    // comment / uncomment this if
    // if (process.env.env === 'development') {
        mainWindow.openDevTools()
    // }

    webContents.on('will-navigate', handleRedirect)
    webContents.on('new-window', handleRedirect)
})

Keyboard Shortcuts with Mousetrap

Mousetrap is a great lib for keyboard shortcuts in electron apps.

var Mousetrap = require('mousetrap')
Mousetrap.bind(['command+x', 'ctrl+x'], () => { console.log('trapped') })

// @see https://github.com/ccampbell/mousetrap

vue.config.js

module.exports = {
    publicPath: './',
    configureWebpack: {
        target: 'electron-renderer',
        node: {
            __filename: true,
            __dirname: true
        },
    }
}

open all links in external browser windows

Per default every link is opened in the electron window, if you want to open browser windows you have to capture all link clicks and open them via openExternal.

// in your app.js

var webContents = window.webContents

var handleRedirect = (e, url) => {
    if(url != webContents.getURL()) {
        e.preventDefault()
        require('electron').shell.openExternal(url)
    }
}

webContents.on('will-navigate', handleRedirect)
webContents.on('new-window', handleRedirect)