DEV Community

Cover image for How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation
Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

How To Create A Mobile App Using Vite, Vue and Ionic Capacitor In 8 Minutes Including Explanation

This is now the 3rd or 4th blog/video I have done on this and i think it gets easier each time!!

All Videos Related to This Series

Capacitor is an open-source native runtime for building Web Native apps. Create cross-platform iOS, Android, and Progressive Web Apps with JavaScript, HTML, and CSS.

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:

In 8 minutes I explain how to create a vue js project with vite and convert it to a mobile application and deploy it to a simulator with live-reload for an efficient development process.

You can create your mobile application without using Ionic Framework Components so that is not included in this process, but leave a comment below if it is something you would like to see.

Also, this same process should work with ReactJS and ViteJS

Note

99.99% of this was done using the Ionic VS Code Plugin but there was an edit to the package.json file that was needed to get live-reload working.

Live Reload is useful for debugging both the web portion of an app as well as native functionality on device hardware or simulators. Rather than deploy a new native binary every time you make a code change, it reloads the browser (or Web View) when changes in the app are detected. - from capacitor website

Image description

line 11 previously said npm run dev

Links

Top comments (0)