Ionic Vue Mobile Template 05

Hybrid mobile template built with Ionic Vue 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

Features

• Vuex
• Firebase
• Mailchimp
• Search Filter
• Responsive

Configs

For this template, I created 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

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 - # 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

• manuelroviradesign via We Love Web Design - App de#spiration
• Tami Maiwashe - Documentation
• おかきょー - Japanese doc translation

Contact

• @dlodeprojuicer on Twitter

Contact

• @dlodeprojuicer on Twitter
• @IonicSA - S.A ionic user group page