BUILDING DESKTOP APPLICATION WITH ELECTRON + VUE + VUETIFY
Team Urgence
QUICK SUMMARY : Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.
WHY VUE ?
Vue is lightweight, easy to learn, and pleasant to write in. Because of its familiar templating syntax and use of components, integrating or migrating existing projects to Vue is faster and smoother. For that reason, Vue. js is great for startups but can be just as well used in large-scale applications.
WHY VUETIFY ?
Vuetify is a complete UI framework built on top of Vue.js. The goal of the project is to provide developers with the tools they need to build rich and engaging user experiences. Unlike other frameworks, Vuetify is designed from the ground up to be easy to learn and rewarding to master with hundreds of carefully crafted components from the Material Design specification
____________________________________________________________________________
In this tutorial, we’re going to learn how to build desktop applications using Electron, we’re also going to learn how to use Vuejs + vuetify UI framework to build Electron applications.
Note: Basic knowledge of Vue.js and the Vue CLI is required to follow this tutorial.
Good day! Today, we will start to create our first desktop application using Electron + Vue + Vuetify. Manually setting up Vue js with electron has a lot of things to do, so now we will a use a boilerplate to handle this part. This boilerplate called electron-vue is a boilerplate for making electron applications built with vue (pretty much what it sounds like).
WHY ELECTRON-VUE ?
The aim of this project is to remove the need of manually setting up electron apps using vue. electron-vue takes advantage of vue-cli for scaffolding, webpack with vue-loader, electron-packager or electron-builder, and some of the most used plugins like vue-router, vuex.
Reminder : On this tutorial I'm using linux os, you can do whatever os you have now.
LET'S GET STARTED !
My local requirements :
1. Node version = 12.18.3
2. Npm version = 6.14.6
3. Vue version = 2.9.6
Create the project :
To create your first application with electron and vue just follow there official docs, here https://github.com/SimulatedGREG/electron-vue
Here is my sample project installation
After running this command `npm run dev` , it will popup a new window the same with this image below.
Alright! We successfully created our first application using electron and vue, but wait! we still need to integrate the vuetify UI framework.
Now lets integrate vuetify UI framework. Install vuetify version 2.5.5 which is the latest version as of now.
npm install vuetifyCreate a plugin file for Vuetify, src/plugins/vuetify.js with the below content:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)Navigate to your main entry point where you instantiate your Vue instance and pass the Vuetify object in as an option. See image below
Now after that, let's try if our vuetify integration is working well. Open the file App.vue and copy the content of image below
Now, run the command `npm run dev` or `yarn dev` if you are using yarn package manager.
After the window poped up, there's nothing displayed in the window cause we have an error. This error just showed up after the updates released by the electron-vue team ( this is from my own experience ). This is what the error is
So to solve, open the file named `webpack.renderer.config.js`, its located in .electronvue-vue folder from your project root directory. Just change this line of code stated from the image below
After that, try to recompile again your project by just running `npm run dev` or `yarn dev`. If you see the same content of the below then vuetify is working already, yahoooo!
That's all ! Happy Coding !!
