Ionic Camera App - Ionic Vue Example

Опубликовано: 17 Март 2026
на канале: Code Swag
10,329
145

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: https://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 development environ...  
How to install Ionic Framework on macOS -    • Installing Ionic on macOS  
How to install Ionic Framework on Linux -    • Installing Ionic Framework on Linux  

A first look at Ionic Vue -    • Ionic Vue Production Release - Getting Sta...  

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