In today’s technological era we often find the need to make apps for mobile devices to let the services reach into the people’s hands more effectively. Most of the applications can be done with just the website but we still find the need to have a mobile application alongside it. There are obvious benefits to this approach:

1. Ease of access: Users find easy to navigate in an app than a website.
2. Personalized: The apps are personalized over time on the needs and usage habits of the User.
3. Offline visibility: Most good apps nowadays have some specific features available even when the users are offline.
4. Notification: We can attract them to use our services via special deals via Push Notifications.

Making a desktop application has also the same benefits. Depending on the target customers of the application.

For example, Skype. They have a website as well as a mobile application for chatting but they felt the need for a desktop application which Microsoft built with “Electron Framework”.

This is where “Vuetronex” comes into play. It is a tool for creating desktop applications with VueJS and Electron Framework. What makes it different from native Electron is that it leverages the VueJS for strong implementation of Business Logic and Usage of SQLite database right from the VueJS Client Side. Running database queries with Knex JS and Bookshelf JS.

Build beautiful Electron application with VueJS, Vue Router, Knex JS, Bookshelf JS & Tailwind CSS. Run database queries right from the VueJS Application.

Getting Started

You need to have git, node & npm installed in your machine.

Use Vuetronex CLI

Installation

$ npm i -g @vuetronex/cli
$ vex new my-project
$ cd my-project
$ npm start

Usage

Basically, it is just a Vue application. With some Electron and Database built into it. There is a lot of functionality built-in with this application.

The main focus is to develop seamlessly with electron and have all the electron APIs in the Vue instance.

Run: vex --help or vex to get all the command offered with this package.

Start Project

$ vex new project-name

Create Pages

$ vex make:page ProductPage

Out:
Page Created: ProductPage.vue
You will find the created page inside: src/pages.

Build Components

$ vex make:component ProductItem

Out:
Page Component: ProductItem.vue
You will find the created component inside: src/components.

Create Models

$ vex make:model Product

Out:
Model Created: Product.js
You will find the created model inside: models.

Optionally you can also use -m to make the migration as well. Also, you can use -s to make the seeder at the same go.

Create Migrations

$ vex make:migration product

Out:
Migration Created: 132545626_products.js
You will find the created migration inside: migrations.

Optionally, you can use -a flag if you want to alter table migration.
Also, you can use -s to make the seeder at the same go.

Run Migrations

$ vex migrate

Rollback Migrations

$ vex migrate:rollback

Create Seeders

$ vex make:seed product

Out:
Seeder Created: 132545626_products.js
You will find the created seeder inside: seeds.

Running the Seeds

$ vex seed

This tool also adds native Electron API into the VueJS framework so that the developers don’t have to think about Electron while using it. Electron code can be written right in the VueJS Application.

Prototypes

Inside VueJS, you can find all the electron prototyping. So that you can access the Electron APIs seamlessly. Also, there are other bindings that will leverage the workflow.

Example:

this.$electron.ipcRenderer
// It is the ipcRenderer

this.$db.User
// It is the reference to the User Model.

this.$http
// It is the axios

Vex

There is a command line utility offered with this application vex

Run: vex --help to get all the command offered with this package.

Read more about Vex in the official documentation.

Security

If you discover any security-related issues, please post an issue using the issue tracker in Github.

Conclusion

In a nutshell, it helps the development process quite a bit. Without even interacting with Native Electron distinctly. Making use of Electron Separately makes it very hard and cumbersome to implement the logic. My main focus during building this tool was to have the developers feel right at home while making a desktop application with very little interaction or knowledge of the Core Electron Framework and easy development with SQL.

Hope you guys like using this tool. Please provide feedback on the repository what changes you would like to see next in Vuetronex.