Ionic Vue Mobile Template 04
Hybrid mobile template built with Ionic Vue using capacitor for native builds.
Template is inspired by the new Capitec Bank app. Capitec is one of the largest banks in South Africa. It provides personal banking services through its 1000-plus branches across the country. For this template the focus is on the general look and feel.
Project setup
npm install
Run on the browser – development
npm run serve
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
- Tami Maiwashe – Documentation
- おかきょー – Japanese doc translation
Contact
- @dlodeprojuicer on Twitter