[Vue3] Getting Started with Vue3 + Electron (with Typescript, TailwindCSS)

Let's make a desktop application using Vue3.

Create a Project using Vue-CLI

$ vue create vue-electron

Select "Manually select features" for some options.

I picked TypeScript, Router, and Vuex.

I will use Vue3.

And, I will use ESLint with Prettier.

Lastly, I will use dedicated config files for easier management.

$ cd vue-electron

Now, we have our project.

Adding Electron

Now, let's add Electron that is helpful to make a desktop application.

$ vue add electron-builder

※ You need to install node v14 or above.

 

All you need to do is selecting the version of Electron.

Adding TailwindCSS

Moreover, let's add TailwindCSS for styling.

$ vue add tailwind

Select configuration information.

Running an Application

Now, we have a great starting point for application development.

$ yarn electron:serve

Awesome!!

We have this so easy way!!

Now, we can develop a desktop application like developing a web application with Vue3.

Building an Application

$ yarn electron:build

Then, the dist_electron folder would be generated with the results.

Conclusion

I hope you feel how easy to make a desktop application using Vue3.