Ionic Vue Mobile Template 03
Hybrid mobile template built with (latest) vue-ionic and using capacitor for native builds - These templates are from app design inspiration pages on Instagram or Dribble.
Project setup
npm install
Run on the browser - development
npm run serve
Linter
npm run lint
Design
Native
Using Capacitor for native builds
Prepare native builds
iOS testing and distribution
- Download latest Xcode
npm run build
npx cap add ios
npx cap copy
npx cap open ios
Xcode takes a few minutes 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 top left. This will prepare and run the app in a simulator, if all goes well you should be able to login and click around. If not, create an issue
Icons and launch images - Xcode (v11.5) cannot map icons listed in config.xml so this has to be done manually
Android testing and distribution
- Download latest Android Studio
npm run build
npx cap add android
npx cap copy
npx cap open android
Android Studio takes a few minutes 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
Newsletter
Subscribe to get templete and other ionic-vue updates in your inbox!
Template affiliates
I want to keep doing these templates for free for as long as possible. I have joined a few affialate programs to help take care of the costs.
- Pixeltrue - High quality illustrations that will help you build breath-taking websites.
- Getrewardful - Create your own affilaite program.
Alternatively you can buy me a coffee
Credits
- Valery Reck - App design inspiration
- Tami Maiwashe - Documentation
- ใใใใใผ - Japanese doc translation
Contact
- @dlodeprojuicer on Twitter