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.

Demo

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

1. Download the latest Xcode
2. npm run build
3. npx cap add ios
4. npx cap copy
5. 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

1. Download the latest Android Studio
2. npm run build
3. npx cap add android
4. npx cap copy
5. 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.
6. 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

• Getting started

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