Vuetronex – The Unavoidable Desktop Application with Vue JS
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:
- Ease of access: Users find easy to navigate in an app than a website.
- Personalized: The apps are personalized over time on the needs and usage habits of the User.
- Offline visibility: Most good apps nowadays have some specific features available even when the users are offline.
- 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.
You need to have git, node & npm installed in your machine.
$ npm i -g @vuetronex/cli $ vex new my-project $ cd my-project $ npm start
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.
$ vex new project-name
$ vex make:page ProductPage
Out: Page Created: ProductPage.vue You will find the created page inside: src/pages.
$ vex make:component ProductItem
Out: Page Component: ProductItem.vue You will find the created component inside: src/components.
$ 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.
$ 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.
$ vex migrate
$ vex migrate:rollback
$ 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.
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.
this.$electron.ipcRenderer // It is the ipcRenderer this.$db.User // It is the reference to the User Model. this.$http // It is the axios
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.
If you discover any security-related issues, please post an issue using the issue tracker in Github.
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.