Stuff I'm Up To

Technical Ramblings

Opening another Window with electron-vue — October 9, 2018

Opening another Window with electron-vue

Having entered the world of Electron and mashing it together with Vue.js using electron-vue I needed to figure out how to open another window from Electron and still have vue active within it and better yet, still have the hot module reloading active in that new window whilst developing it.

It was whilst trawling the electron-vue github issue page that I came across a golden nugget of code that answered the very question for me.

https://github.com/SimulatedGREG/electron-vue/issues/401#issuecomment-330656658

Quoted:

First of all, you need to disable mode: 'history' in your vue-router, check in vue-router docs

Then do the following:

src/main/index.js example

ipc.on('showChart', function (e, data) {
  const modalPath = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/showChart'
    : `file://${__dirname}/index.html#showChart`
  let win = new BrowserWindow({ width: 400, height: 320, webPreferences: {webSecurity: false} })
  win.on('close', function () { win = null })
  win.loadURL(modalPath)
})

In your router, use the exactly path to your url

src/renderer/router.js example

{
  path: '/showChart',
  name: 'showChart',
  component: require('your-router'),
},

 

Advertisements
CBR-Manager — December 5, 2016
BrowserWindow or window.open — December 2, 2016
Electron Installer for Windows — December 1, 2016
Learning Electron & Node.js — November 29, 2016

Learning Electron & Node.js

Many years ago in a galaxy far, far away I developed an application to manage and read my comic books. I developed it in a Windows environment and used C# Dot Net to build it. It worked just great and I still use it today.

It’s actually one of the things I use that prevents me from going full Linux on my home desktop. So I decided I’d see if I could remedy that by replacing it with a cross platform solution using Electron.

If nothing else it would provide me with an opportunity to learn how to use Electron & Node.js

Continue reading

Atom – an Electron IDE — November 17, 2016

Atom – an Electron IDE

I figured this was pretty cool. An editor created using Electron, that you can use to create Electron apps.

https://atom.io/

What’s fun about this is that after using the Brackets editor for some time, and it is pretty good, I realised that Brackets was written in JavaScript. I had no clue how though. Now I realise it’s done in a similar manner. A JavaScript engine, powering a browser style interface.

Also Microsoft have just released Visual Studio Code, which is actually made using Electron!

I’ll certainly be trying our Atom in place of Brackets for a while.

Node.js & Electron — November 16, 2016

Node.js & Electron

I’ve run into Node.js a few times and kinda struggled with just what it’s all about. I’ve decided to have a bit of a poke at trying to develop an application that is cross platform and runs locally on either Windows or Linux, maybe even the fruit stuff and ran into Electron.

http://electron.atom.io/

I’ll confess to being completely lost as to how to even begin. Setting it up seemed confusing in the documentation. In reality it pretty much fell onto my Windows machine once I figured it out.

Electron is a product delivering Node.js and the Chromium browser as a package. So put simply you write HTML, JavaScript & CSS that get delivered into a locally run browser. Node.js provides the scripting engine that has access to local resources that are accessed through the Chromium browser.

Continue reading