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.
Top comments (1)
Thank you so much for sharing this! I wanted to start an electron project integrating it with vue, and I was able to do it thanks to this publication.