/ionic-vue-template

Primary LanguageVueMIT LicenseMIT

Ionic Vue Mobile Template 05

Netlify Status

Hybrid mobile template built with (latest) ionic-vue and using capacitor for native builds.

Template is based on TechConf-db.com, a side project of mine. Unlike other templetes, this one is not meant to be a mobile app, atleast not yet, but it is responsive and can be used as a mobile app.

Demo

Buy Me A Coffee

Features

  • Vuex
  • Firebase
  • Mailchimp
  • Search Filter
  • Responsive

Configs

For the purpose of this template I created a static data. Techconf-db is using a Firebase backend. Replace Firebase config in src/firebase.js or remove Firebase completely to use your prefer your a different backend.

Also, make sure you replace mailchimp config url on line 123 of src/components/Subscription.vue

Project setup

npm install

Run on the browser - development

npm run serve

Design

Techconf-db screenshot

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.

Official docs

Contact