GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → dlodeprojuicer → ionic-vue-mobile-template-01

dlodeprojuicer / ionic-vue-mobile-template-01

Licence: MIT license
Hybrid app template built with vue, ionic and capacitor.

Programming Languages

Vue
7211 projects
javascript
184084 projects - #8 most used programming language
typescript
32286 projects
SCSS
7915 projects
HTML
75241 projects
CSS
56736 projects

Labels

ionicboilerplate-templatetemplatescapacitorvue3ionic-vuevue-ionic

Projects that are alternatives of or similar to ionic-vue-mobile-template-01

ionic-vue-mobile-template-03
Hybrid app template built with vue, ionic and capacitor.
Stars: ✭ 62 (+31.91%)
Mutual labels:  ionic, capacitor, vue3, ionic-vue, vue-ionic
v-cupertino
A Vue 3 Wrapper for Cupertino Pane Library
Stars: ✭ 17 (-63.83%)
Mutual labels:  ionic, capacitor, ionic-vue
tutorial-photo-gallery-vue
Photo Gallery Tutorial: Ionic Vue and Capacitor
Stars: ✭ 33 (-29.79%)
Mutual labels:  ionic, capacitor, vue3
IonicMadrid
Charlas Ionic Madrid
Stars: ✭ 14 (-70.21%)
Mutual labels:  ionic, capacitor
Generate Template Files
A simple generator to create custom template files for any application
Stars: ✭ 60 (+27.66%)
Mutual labels:  boilerplate-template, templates
ionic-firebase-image-upload
Building an Ionic App with Protected/Private Content. This app shows how to use Firebase Storage from an Ionic Angular app both with public and private content.
Stars: ✭ 19 (-59.57%)
Mutual labels:  ionic, capacitor
vuex-typescript
boilerplate repository for vue 3 in typescript, dynamic code split && server-side rendering
Stars: ✭ 54 (+14.89%)
Mutual labels:  boilerplate-template, vue3
ionic-level
iOS level app clone made with Angular, Ionic & Capacitor.
Stars: ✭ 19 (-59.57%)
Mutual labels:  ionic, capacitor
cordova-plugin-apkupdater
This plugin allows your Android app to download and install compressed updates without the Google Play Store.
Stars: ✭ 46 (-2.13%)
Mutual labels:  ionic, capacitor
Nativescript
NativeScript empowers you to access native platform APIs from JavaScript directly. Angular, Capacitor, Ionic, React, Svelte, Vue and you name it compatible.
Stars: ✭ 20,730 (+44006.38%)
Mutual labels:  ionic, capacitor
Ionic Framework
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
Stars: ✭ 45,802 (+97351.06%)
Mutual labels:  ionic, capacitor
Ionic Custom Components
Ionic 3/4 Custom Components. Spend less time on design and more time on coding! Free to use for everyone! 🧙‍♂️
Stars: ✭ 23 (-51.06%)
Mutual labels:  ionic, templates
capacitor-rate-app
Let users rate your app using native review app dialog for both Android and iOS.
Stars: ✭ 88 (+87.23%)
Mutual labels:  ionic, capacitor
Cookie
A Template-based File Generator. Like cookiecutter but works with file templates instead of project templates.
Stars: ✭ 261 (+455.32%)
Mutual labels:  boilerplate-template, templates
app-starter
Angular mono-repo (Ionic/Capacitor/StencilJS/Web Component) app starter for supporting cross platform apps.
Stars: ✭ 75 (+59.57%)
Mutual labels:  ionic, capacitor
blobile
Blases Loaded - Unofficial Live Blaseball Game Viewer for iOS, Android, and Web
Stars: ✭ 16 (-65.96%)
Mutual labels:  ionic, capacitor
vue3-boilerplate
A Vue 3 Starter Boilerplate with Vue Router 4, Vuex 4, TypeScript 4, Webpack 5, Prettier and More.
Stars: ✭ 133 (+182.98%)
Mutual labels:  boilerplate-template, vue3
Capacitor
Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️
Stars: ✭ 6,598 (+13938.3%)
Mutual labels:  ionic, capacitor
capacitor-site
Capacitor website
Stars: ✭ 0 (-100%)
Mutual labels:  ionic, capacitor
FhemNative
Cross Platform FHEM-HomeAutomation Frontend
Stars: ✭ 14 (-70.21%)
Mutual labels:  ionic, capacitor
View All Similar Projects ➔

Ionic Vue Mobile Template 01

Netlify Status

Hybrid mobile template built with Ionic Vue using capacitor for native builds.

Demo

Project setup

npm install

Run on the browser - development

npm run serve

Design

alt text

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

Resources

  • Newsletter - Signup 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 Buy Me A Coffee

Credits

Contact

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].