Electron Adventures: Episode 28: Vue

We tried jQuery, D3, React, and Svelte, so let's try another framework with Electron - Vue.

Create new Vue project

As usual, we do the same steps - create a new project, then add Electron:

$ npx @vue/cli create episode-28-vue
$ npm i --save-dev electron

@vue/cli asks a bunch of questions about what you want, and as far as I can tell, any of them work just fine with Electron. I picked Vue 3 and disabled most of the extras, but if you want to follow along, customize it to your liking.

Then I removed most of the files I didn't need, and only kept or added the ones below.

`index.js`

A small Electron backend file to start our app. It's identical to our Svelte and React versions, except for different default port number again:

let { app, BrowserWindow } = require("electron")

function createWindow() {
  let win = new BrowserWindow({})
  win.maximize()
  win.loadURL("http://localhost:8080/")
}

app.on("ready", createWindow)

app.on("window-all-closed", () => {
  app.quit()
})

`public/index.html`

This one is completely unchanged from @vue/cli.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

`src/main.js`

This one is also unchanged other than making coding style match the rest of the series with double quotes:

import { createApp } from "vue"
import App from "./App.vue"

createApp(App).mount("#app")

`src/App.vue`

I removed most of the stuff newly created app starts with and only left very basic one:

<template>
  <h1>Welcome to Vue + Electron!</h1>
</template>

<script>
export default {
  name: "App"
}
</script>

<style global>
body {
  background-color: #444;
  color: #fff;
}
</style>

Start!

You need two terminals to run:

$ npm run serve

And:

$ npx electron .

Result

Here's the results:

In the next episode we'll try to make Vue app match what we did with Svelte so far.

As usual, all the code for the episode is here.

Tomasz Węgrzanowski's Blog