Ionic Vue Mobile Template 03
Hybrid mobile template built with Ionic Vue using capacitor for native builds.
Project setup
Run on the browser – development
Linter
Design
Native
Using Capacitor for native builds
Prepare native builds
iOS testing and distribution
Download the latest Xcode
npm run build
npx cap add ios
npx cap copy
npx cap open ios Xcode takes a few seconds to index the files; keep an eye at the top of Xcode’s window for progress.
[Not compulsory] For sanity check click on the play button in the top left. This will prepare and run the app in a simulator, if all goes well you should be able to run the app and click around. If not, create an issue 🤷 and I will have a look.
Android testing and distribution
Download the latest Android Studio
npm run build
npx cap add android
npx cap copy
npx cap open android Android Studio takes a few seconds to index the files, keep an eye at the bottom of Android Studio for progress.
Testing – When indexing is complete, look for a green play button. Click the play button and it will launch the app in an emulator (See here to setup Emulator) or on the phone, if a phone is connected via USB.
Official Docs
Resources
Newsletter – Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox!
YouTube Channel – Subscribe to my YouTube channel.
Ionic Vue Tempalates – Free Ionic Vue Templates.
Ionic Vue VSCode Snippets – This extension adds ionic-vue snippets. Quickly add ionic-vue component code by simply typing iv. The iv prefix will show a range of snippets to choose from.
Affiliates
I want to keep doing these templates for free for as long as possible. I have joined a few affiliate programs to help take care of the costs.
Pixeltrue – High-quality illustrations that will help you build breath-taking websites.
Getrewardful – Create your own affiliate program.
Alternatively, you can buy me a coffee
Credits
Valery Reck – App design inspiration
Tami Maiwashe – Documentation
おかきょー – Japanese doc translation
Contact
@dlodeprojuicer on Twitter