DEV Community

Tomasz Wegrzanowski
Tomasz Wegrzanowski

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

@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()
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Start!

You need two terminals to run:

$ npm run serve
Enter fullscreen mode Exit fullscreen mode

And:

$ npx electron .
Enter fullscreen mode Exit fullscreen mode

Result

Here's the results:

Episode 28 screenshot

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.

Discussion (0)