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
npm install --save vue
yarn add vue
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:
<div id="app">
  {{ message }}
</div>
<script type="module" src="./renderer.js"></script>
// Since we declared the script as type=module in the HTML file,
// we can use ES Modules (adapted from the Vue 2 Introduction
// https://vuejs.org/v2/guide/#Declarative-Rendering
​
// Alternatively, omit the .min from the path for Vue debugging purposes.
import Vue from '../node_modules/vue/dist/vue.esm.browser.min.js';
​
const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
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
npm install --save-dev vue-loader vue-template-compiler
yarn add --dev vue-loader vue-template-compiler
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
npm install --save vue
yarn add vue
You should now be able to add single file components to your app, the same as you would for a "regular" web app.

React with TypeScript

Next - Guides

Developing with WSL

Last modified 4d ago