ionic-team / tutorial-photo-gallery-vue

Photo Gallery Tutorial: Ionic Vue and Capacitor
https://ionicframework.com/docs/vue/your-first-app
60 stars 43 forks source link
capacitor ionic ionic-framework vue vue3

Build Your First Ionic App: Photo Gallery (Ionic Vue and Capacitor)

Get started with Ionic by building a photo gallery app that runs on iOS, Android, and the web - with just one codebase. This is the complete project referenced in the "Your First App: Vue" guide. Follow along to create a complete CRUD (create-read-update-delete) experience.

Powered by Ionic Vue (web app) and Capacitor (native app runtime).

How It Works

After the user navigates to Tab 2 (Photos), they can tap/click on the camera button to open up the device's camera. After taking or selecting a photo, it's stored permanently into the device's filesystem. When the user reopens the app at a later time, the photo images are loaded from the filesystem and displayed again in the gallery. The user can tap on a photo to be presented with the option to remove the photo.

Feature Overview

Project Structure

How to Run

Note: It's highly recommended to follow along with the tutorial guide, which goes into more depth, but this is the fastest way to run the app.

0) Install Ionic if needed: npm install -g @ionic/cli. 1) Clone this repository. 2) In a terminal, change directory into the repo: cd photo-gallery-capacitor-vue. 3) Install all packages: npm install. 4) Run on the web: ionic serve. 5) Run on iOS or Android: See here.