Vue 2
How to create an Electron app with Vue 2 and Electron Forge
Adding Vue 2 support to a basic Electron Forge template doesn't require a complicated boilerplate to get started.

Create the app

Create a standard Electron per the Getting Started guide.

Add the Vue 2 dependency

Add the Vue 2 package to your dependencies:
NPM
Yarn
1
npm install --save vue
Copied!
1
yarn add vue
Copied!

Integrate Vue 2 code

You should now be able to start writing and using Vue 2 components in your Electron app. The following is a very minimal example of how to start to add Vue 2 code:
src/index.html
src/renderer.js
Add the following before the closing </body> tag:
1
<div id="app">
2
{{ message }}
3
</div>
4
<script type="module" src="./renderer.js"></script>
Copied!
1
// Since we declared the script as type=module in the HTML file,
2
// we can use ES Modules (adapted from the Vue 2 Introduction
3
// https://vuejs.org/v2/guide/#Declarative-Rendering
4
5
// Alternatively, omit the .min from the path for Vue debugging purposes.
6
import Vue from '../node_modules/vue/dist/vue.esm.browser.min.js';
7
8
const app = new Vue({
9
el: '#app',
10
data: {
11
message: 'Hello Vue!'
12
}
13
})
Copied!

Alternative: Using Single File Components

For advanced use cases such as single file components, it's recommended to use the Webpack plugin so that the components get built correctly. You'll also need to add the appropriate Vue loader/compiler packages to the app's devDependencies.
Create the app with the Webpack template or the TypeScript + Webpack template. Add the following packages to your devDependencies so that the single file components get compiled and loaded correctly:
NPM
Yarn
1
npm install --save-dev vue-loader vue-template-compiler
Copied!
1
yarn add --dev vue-loader vue-template-compiler
Copied!
Setting up the vue-loader Webpack module is left as an exercise for the reader (hint: vue-loader Webpack config should ideally go in the renderer configuration only).
Add the Vue 2 package to your dependencies:
NPM
Yarn
1
npm install --save vue
Copied!
1
yarn add vue
Copied!
You should now be able to add single file components to your app, the same as you would for a "regular" web app.
Last modified 2mo ago