https://github.com/dlodeprojuicer/ionic-vue-mobile-template-06
Instagram- Hybrid app template built with vue, ionic, and capacitor.
https://github.com/dlodeprojuicer/ionic-vue-mobile-template-06
boilerplate-template capacitor ionic ionic-vue ionicframework vue vue3
Last synced: 3 months ago
JSON representation
Instagram- Hybrid app template built with vue, ionic, and capacitor.
- Host: GitHub
- URL: https://github.com/dlodeprojuicer/ionic-vue-mobile-template-06
- Owner: dlodeprojuicer
- Created: 2021-01-08T14:13:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-24T15:24:52.000Z (about 4 years ago)
- Last Synced: 2025-04-11T22:11:36.360Z (3 months ago)
- Topics: boilerplate-template, capacitor, ionic, ionic-vue, ionicframework, vue, vue3
- Language: Vue
- Homepage: https://ionic-vue-mobile-template-06.netlify.app/
- Size: 4.91 MB
- Stars: 21
- Watchers: 2
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Ionic Vue Instagram Template
Instagram-inspired [Ionic Vue](https://ionicframework.com/vue) template.
[Demo](https://ionic-vue-mobile-template-06.netlify.app)
## Project setup
```
npm install
```
### Run on the browser - development
```
npm run serve
```
## Design
## Native
Using [Capacitor](https://capacitorjs.com/docs/getting-started) for native builds
## Prepare native builds
### iOS testing and distribution
1. Download the latest Xcode
2. `npm run build`
3. `npx cap add ios`
3. `npx cap copy`
4. `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`
3. `npx cap copy`
4. `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.
5. 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](https://developer.android.com/studio/run/managing-avds)) or on the phone, if a phone is connected via USB.
## Official Docs
- [Getting started](https://ionicframework.com/vue)
## Resources
- [Newsletter](https://mailchi.mp/b9133e120ccf/sqan8ggx22) - Signup to my Ionic Vue newsletter to get templates and other Ionic Vue updates in your inbox!
- [YouTube Channel](https://www.youtube.com/channel/UC5jZ6srZuLwt3O3ZtuM1Dsg) - Subscribe to my YouTube channel.
- [Ionic Vue Tempalates](https://tinyurl.com/y2gl39dk) - Free Ionic Vue Templates.
- [Ionic Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=dlodeprojuicer.ionicvuesnippets) - 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](https://www.pixeltrue.com/?via=simo) - High-quality illustrations that will help you build breath-taking websites.
- [Getrewardful](https://www.getrewardful.com/?via=simo) - Create your own affiliate program.
Alternatively, you can buy me a coffee 
## Credits
- [Carlos Martinez](https://github.com/cmartinezone/IonicVueExplorePlaces)
- [Tami Maiwashe](https://www.linkedin.com/in/tami-maiwashe-32824a19a/) - Documentation
## Contact
- [@dlodeprojuicer](https://twitter.com/dlodeprojuicer) on Twitter