Hybrid app template built with vue, ionic and capacitor

Ionic Vue Mobile Template 01

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.

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 latest Xcode
2. npm run build
3. npx cap add ios
4. npx cap copy
5. 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 🤷 and I will have a look.

Icons and launch images - Xcode (v11.5) cannot map icons listed in config.xml so this has to be done manually 😞. In the root folder look for Resources and select Images.xcassets. A panel will show up where you can select AppIcon to add app icons or LaunchImage to add launch images.

Android testing and distribution

1. Download 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 minutes 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.

Disclaimer

Ionic Vue is still in beta; I am using this setup in production but please use with caution. Keep an eye on Ionic Twitter account, forum and slack group for updates, RCs and production release expected towards the end of the year.

Credits

• manuelroviradesign via We Love Web Design - App design inspiration
• Tami Maiwashe - Documentation

Contact

• @dlodeprojuicer on Twitter

Download Details:

Author: dlodeprojuicer

Demo: https://ionic-vue-mobile-template-01.netlify.app/

Source Code: https://github.com/dlodeprojuicer/ionic-vue-mobile-template-01

#vuejs #vue #javascript