ionic-team / tutorial-photo-gallery-vue

Photo Gallery Tutorial: Ionic Vue and Capacitor

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

• App framework: Vue
• UI components: Ionic Framework
  • Camera button: Floating Action Button (FAB)
  • Photo Gallery display: Grid
  • Delete Photo dialog: Action Sheet
• Native runtime: Capacitor
  • Taking photos: Camera API
  • Writing photo to the filesystem: Filesystem API
  • Storing photo gallery metadata: Preferences API

Project Structure

• Tab2 (Photos) (src/views/Tab2.vue): Photo Gallery UI and basic logic.
• usePhotoGallery Hook (src/composables/usePhotoGallery.ts): Logic encapsulating Capacitor APIs, including Camera, Filesystem, and Preferences.

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.

tutorial-photo-gallery-vue's Issues

photo not saved to filesystem

@dotNetkow

Here:

https://ionicframework.com/docs/vue/your-first-app/3-saving-photos

It says:

Each time a new photo is taken, it’s now automatically saved to the filesystem.

Where? Testing on Windows 10 and I do not see it.

Debugging shows this:

peterennis/ae-gallery@63ef4c5#diff-e82017290860c60ca00f0a113bd7d2efR52-R53

But no trace of a file anywhere.

I assumed the initial app is a PWA using the camera on the laptop
and later is configured for a mobile device.

Confused 😕

favicon not loading problem

@dotNetkow

Working through the docs to build app.
I could not load my favicon - tried rebuild, prod build,
icon cache reset (WIndows), clear cache - but no luck.

Traced problem to manifest here:

Finally did this:

and get this result:

I am not really sure if this is a bug or Windows/Mac difference.

I can make a PR if it is a bug.

Unable to take photo! DOMException: The associated Track is in an invalid state.

I also see a bunch of other errors:
Uncaught (in promise) TypeError: Cannot read property 'length' of undefined

replace line convertBlobToBase64 (vue tutorial) with base64FromPath (react tutorial)

tutorial-photo-gallery-vue/src/composables/usePhotoGallery.ts

Line 64 in d7e0f0b

base64Data = (await convertBlobToBase64(blob)) as string;

Line 64 causes TS errors
TS2352: Conversion of type 'void' to type 'string' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

Cause:
convertBlobToBase64 (https://github.com/ionic-team/tutorial-photo-gallery-vue/blob/main/src/composables/usePhotoGallery.ts#L37) doesn't specify string as promise output type

Fix:

• Use the code from the React tutorial
• Delete line 37-45 and line 62-64
• Copy the function base64FromPath from line 112 https://github.com/ionic-team/tutorial-photo-gallery-react/blob/009dceb500144d20bc4a2c45e3a95c256eacec93/src/hooks/usePhotoGallery.ts#L112
• Copy the base64Data = await base64FromPath(photo.webPath!); from 58 https://github.com/ionic-team/tutorial-photo-gallery-react/blob/009dceb500144d20bc4a2c45e3a95c256eacec93/src/hooks/usePhotoGallery.ts#L58

index.esm.js?58b7:1511 Uncaught (in promise) Error: IonTabs must contain an IonRouterOutlet

index.esm.js?58b7:1511 Uncaught (in promise) Error: IonTabs must contain an IonRouterOutlet. See https://ionicframework.com/docs/vue/navigation#working-with-tabs for more information.
at Proxy.render (index.esm.js?58b7:1511:1)
at renderComponentRoot (runtime-core.esm-bundler.js?d2dd:893:1)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?d2dd:5030:1)
at ReactiveEffect.run (reactivity.esm-bundler.js?89dc:160:1)
at setupRenderEffect (runtime-core.esm-bundler.js?d2dd:5156:1)
at mountComponent (runtime-core.esm-bundler.js?d2dd:4939:1)
at processComponent (runtime-core.esm-bundler.js?d2dd:4897:1)
at patch (runtime-core.esm-bundler.js?d2dd:4489:1)
at mountChildren (runtime-core.esm-bundler.js?d2dd:4685:1)
at mountElement (runtime-core.esm-bundler.js?d2dd:4594:1)

taking photos

@dotNetkow

Here:

This causes an error as the highlighted ionic components are not used at this point.

I fixed it with:

Repo here:

https://github.com/peterennis/ae-gallery

These components are introduced here:

peterennis/ae-gallery@63ef4c5

Camera not opening

Solved!

vue/no-deprecated-slot-attribute

VS Code
Install recommended extension (Vetur)
Shows error on slot
Deprecated in Vue but still used in Ionic

ionic6 Android8.0 run app is white screen

i use photo-gallery-vue demo try run api >=28 is ok.but run api26(Android8.0) white screen will appear.

run log：
03/20 11:36:52: Launching 'app' on Pixel 2 API 26.
Install successfully finished in 1 s 398 ms.
$ adb shell am start -n "io.ionic.starter/io.ionic.starter.MainActivity" -a android.intent.action.MAIN -c android.intent.category.LAUNCHER
Connected to process 6894 on device 'Pixel_2_API_26 [emulator-5554]'.
Capturing and displaying logcat messages from application. This behavior can be disabled in the "Logcat output" section of the "Debugger" settings page.
W/ResourceType: Invalid package identifier when getting bag for resource number 0x00000000
I/zygote: Rejecting re-init on previously-failed class java.lang.Class<androidx.core.view.ViewCompat$2>: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/view/View$OnUnhandledKeyEventListener;
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote: Caused by: java.lang.ClassNotFoundException: Didn't find class "android.view.View$OnUnhandledKeyEventListener" on path: DexPathList[[zip file "/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/base.apk"],nativeLibraryDirectories=[/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/lib/x86, /system/lib, /vendor/lib]]
I/zygote: at java.lang.Class dalvik.system.BaseDexClassLoader.findClass(java.lang.String) (BaseDexClassLoader.java:93)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String, boolean) (ClassLoader.java:379)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String) (ClassLoader.java:312)
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote:
I/zygote: Rejecting re-init on previously-failed class java.lang.Class<androidx.core.view.ViewCompat$2>: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/view/View$OnUnhandledKeyEventListener;
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote: Caused by: java.lang.ClassNotFoundException: Didn't find class "android.view.View$OnUnhandledKeyEventListener" on path: DexPathList[[zip file "/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/base.apk"],nativeLibraryDirectories=[/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/lib/x86, /system/lib, /vendor/lib]]
I/zygote: at java.lang.Class dalvik.system.BaseDexClassLoader.findClass(java.lang.String) (BaseDexClassLoader.java:93)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String, boolean) (ClassLoader.java:379)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String) (ClassLoader.java:312)
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote:
I/zygote: Rejecting re-init on previously-failed class java.lang.Class<androidx.core.view.ViewCompat$2>: java.lang.NoClassDefFoundError: Failed resolution of: Landroid/view/View$OnUnhandledKeyEventListener;
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote: Caused by: java.lang.ClassNotFoundException: Didn't find class "android.view.View$OnUnhandledKeyEventListener" on path: DexPathList[[zip file "/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/base.apk"],nativeLibraryDirectories=[/data/app/io.ionic.starter-iLPS1-N9juDY3z8yV6GQhw==/lib/x86, /system/lib, /vendor/lib]]
I/zygote: at java.lang.Class dalvik.system.BaseDexClassLoader.findClass(java.lang.String) (BaseDexClassLoader.java:93)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String, boolean) (ClassLoader.java:379)
I/zygote: at java.lang.Class java.lang.ClassLoader.loadClass(java.lang.String) (ClassLoader.java:312)
I/zygote: at void androidx.core.view.ViewCompat.setOnApplyWindowInsetsListener(android.view.View, androidx.core.view.OnApplyWindowInsetsListener) (ViewCompat.java:2463)
I/zygote: at android.view.ViewGroup androidx.appcompat.app.AppCompatDelegateImpl.createSubDecor() (AppCompatDelegateImpl.java:938)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.ensureSubDecor() (AppCompatDelegateImpl.java:806)
I/zygote: at void androidx.appcompat.app.AppCompatDelegateImpl.setContentView(int) (AppCompatDelegateImpl.java:693)
I/zygote: at void androidx.appcompat.app.AppCompatActivity.setContentView(int) (AppCompatActivity.java:170)
I/zygote: at void com.getcapacitor.BridgeActivity.onCreate(android.os.Bundle) (BridgeActivity.java:28)
I/zygote: at void io.ionic.starter.MainActivity.onCreate(android.os.Bundle) (MainActivity.java:18)
I/zygote: at void android.app.Activity.performCreate(android.os.Bundle) (Activity.java:6975)
I/zygote: at void android.app.Instrumentation.callActivityOnCreate(android.app.Activity, android.os.Bundle) (Instrumentation.java:1213)
I/zygote: at android.app.Activity android.app.ActivityThread.performLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent) (ActivityThread.java:2770)
I/zygote: at void android.app.ActivityThread.handleLaunchActivity(android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:2892)
I/zygote: at void android.app.ActivityThread.-wrap11(android.app.ActivityThread, android.app.ActivityThread$ActivityClientRecord, android.content.Intent, java.lang.String) (ActivityThread.java:-1)
I/zygote: at void android.app.ActivityThread$H.handleMessage(android.os.Message) (ActivityThread.java:1593)
I/zygote: at void android.os.Handler.dispatchMessage(android.os.Message) (Handler.java:105)
I/zygote: at void android.os.Looper.loop() (Looper.java:164)
I/zygote: at void android.app.ActivityThread.main(java.lang.String[]) (ActivityThread.java:6541)
I/zygote: at java.lang.Object java.lang.reflect.Method.invoke(java.lang.Object, java.lang.Object[]) (Method.java:-2)
I/zygote: at void com.android.internal.os.Zygote$MethodAndArgsCaller.run() (Zygote.java:240)
I/zygote: at void com.android.internal.os.ZygoteInit.main(java.lang.String[]) (ZygoteInit.java:767)
I/zygote:
I/WebViewFactory: Loading com.android.chrome version 58.0.3029.125 (code 303012512)
I/cr_LibraryLoader: Time to load native libraries: 2 ms (timestamps 5278-5280)

"TypeError: Failed to fetch dynamically imported module": for pwa-camera-modal.entry.js

When following along with the tutorial, the TakePhoto method kept returning "504 (Outdated Optimize Dep)...: node_modules/.vite/deps/pwa-camera-modal.entry.js."
I tried removing and reinstalling the node packages and using different browsers, but I was only able to resolve it with the following:

export default defineConfig({
//... vite.config.ts
  optimizeDeps: {
    exclude: ['@ionic/pwa-elements']
  }
}

This seems to be a known issue for Vite projects (Example found on GitHub) at the moment. Which I wasn't sure to post the issue in https://github.com/ionic-team/starters, but since I was following this tutorial figure to post it here.

[ERROR] Cannot perform serve.

ios build can't open camera

step tap2 click camera, in xcode console

[error] - {"code":"UNIMPLEMENTED"}

property get, property set does not exist on type

From here:

https://ionicframework.com/docs/vue/your-first-app/4-loading-photos

Error: error:0308010C:digital envelope routines::unsupported

When I run ionic serve inside your project I get this error:

ionic serve
vue-cli-service serve
[vue-cli-service] INFO Starting development server...
[vue-cli-service] (node:17247) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
[vue-cli-service] (Use node --trace-deprecation ... to show where the warning was created)
[vue-cli-service] node:internal/crypto/hash:67
[vue-cli-service] this[kHandle] = new _Hash(algorithm, xofLen);
[vue-cli-service] ^
[vue-cli-service] Error: error:0308010C:digital envelope routines::unsupported
[vue-cli-service] at new Hash (node:internal/crypto/hash:67:19)
[vue-cli-service] at Object.createHash (node:crypto:130:10)
[vue-cli-service] at module.exports (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/webpack/lib/util/createHash.js:135:53)
[vue-cli-service] at NormalModule._initBuildHash (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/webpack/lib/NormalModule.js:417:16)
[vue-cli-service] at handleParseError (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/webpack/lib/NormalModule.js:471:10)
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/webpack/lib/NormalModule.js:503:5
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/webpack/lib/NormalModule.js:358:12
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/loader-runner/lib/LoaderRunner.js:373:3
[vue-cli-service] at iterateNormalLoaders (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
[vue-cli-service] at Array. (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
[vue-cli-service] at Storage.finished (/private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/graceful-fs/graceful-fs.js:123:16
[vue-cli-service] at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
[vue-cli-service] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
[vue-cli-service] library: 'digital envelope routines',
[vue-cli-service] reason: 'unsupported',
[vue-cli-service] code: 'ERR_OSSL_EVP_UNSUPPORTED'
[vue-cli-service] }
[vue-cli-service] Node.js v17.2.0
[vue-cli-service] node:internal/process/promises:246
[vue-cli-service] triggerUncaughtException(err, true /* fromPromise */);
[vue-cli-service] ^
[vue-cli-service] RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process 17254.
[vue-cli-service] at /private/var/www/experiments/tutorial-photo-gallery-vue/node_modules/@vue/cli-plugin-typescript/node_modules/fork-ts-checker-webpack-plugin-v5/lib/rpc/rpc-ipc/RpcIpcMessagePort.js:47:47
[vue-cli-service] at processTicksAndRejections (node:internal/process/task_queues:82:21) {
[vue-cli-service] code: undefined,
[vue-cli-service] signal: undefined
[vue-cli-service] }
[vue-cli-service] Node.js v17.2.0

give permission to files in android using capacitor vuejs

i only get access to external files on web platform. unfortunatly, using android device only open camera!
any solution please ?