Ionic Camera App - Ionic Vue Example

In this Ionic Vue Tutorial, we will learn how to build an Ionic Camera App using Ionic Framework, Vue js & Capacitor. This app will feature a Photo Gallery that displays pictures taken by the user using the mobile device camera. Our Ionic Vue App will also make use of Capacitor and the Storage API in order to save our photos. Finally, we will learn how to build our Vue js mobile app for iOS & Android.
Download the project code here: www.codeswag.co.uk/how-to-bui...
This video is brought to you by our generous supporters on Patreon, please consider supporting us for as little as $1 at / codeswag
How to install Ionic Development Environment on Windows 10 - • How to install Ionic 5...
How to install Ionic Framework on macOS - • Installing Ionic on macOS
How to install Ionic Framework on Linux - • Installing Ionic Frame...
A first look at Ionic Vue - • Ionic Vue Production R...
Timestamps
---------------------
00:00 - Intro
00:29 - Update Ionic CLI & create a new project
01:53 - Install project dependency pwa-elements
04:07 - Create Gallery App UI
10:17 - Taking photos with the Capacitor Camera API
18:12 - Saving photos in memory and displaying them in an ion-grid
27:16 - Using the Capacitor Storage API to store photos in the filesystem
37:25 - Add platform-specific code for our app to work on iOS & Android
41:23 - Adding code to delete photos from the gallery using ion-action-sheet component
51:53 - Building our Ionic Vue app on Android
58:20 - Building our Ionic Vue app on iOS

[@laigen7528]

Thank you for this video.
I have tried to make it alone but I'm failed. With your help I was successful. Keep it up bro. 😃

[@CodeSwag]

Glad I could help

[@LuisFernandoPimenta]

very good !

[@CodeSwag]

Thanks a lot Luis!

[@fadhilinjagi1090]

Great video. You saved me a lot, as I could not do it by myself.
Could you please make a video on Ionic Vue vs Quasar framework? I would love to hear your comparison and conclusion.

[@CodeSwag]

Thanks for the suggestion. I'll look into Quasar.

[@isaachatilima]

Great tutorial, quick question. From end to end of this tutorial, will this still work as a PWA? or did it change when you added the platform code block?

[@castagnaf8597]

hello! thanks for this video, very solid tutorial. I found this error in Tabs.vue: [vue/no-deprecated-slot-attribute]
`slot` attributes are deprecated.
ERROR LINE:

[@castagnaf8597]

update: noticed that 'slot' is deprecated? what to use instead?

[@kid_rz]

how to upload from gallery? with axios please

[@chanuboyini9792]

I got an error like slot="used on content inserted into child components to indicate which named slot the content belongs to" what I have to do now?

[@CodeSwag]

Please share your code on github so I can help you to debug

[@fadhilinjagi1090]

Ionic slots are very different from the Vue slot attributes that are now deprecated and raising a bunch of errors. It's just the IDE complaining, but the app should work just fine.

[@anycerollyseignoutiotsop7627]

Salut j'ai suvi toutes les etapes du toto mais je reçois cette erreur de compilation
Failed to compile.
./src/views/Tab2.vue?vue&type=script&lang=ts (./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/Tab2.vue?vue&type=script&lang=ts)
Module not found: Error: Can't resolve '@composables/usePhotoGallery' in 'C:\Users\bekym\Desktop\projet legrandsoft\terre-neuve-app\src\views'

[@Imaginativeone_DF]

Is this Ionic 5 + Vue 3?

[@CodeSwag]

Yes it is

[@Ezechielpitau]

What I hate about this stuff: This tutorial is only a year old and already everything has changed, things are deprecated, imports don't exist anymore... :(

[@CodeSwag]

I totally understand. That is a very frustrating thing about the Javascript world.