<script lang="ts">
// import components from ionic
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/vue";

// import capacitor plugins
import { Plugins, CameraSource, CameraResultType } from "@capacitor/core";
const { Camera } = Plugins;

// import from vue
import { defineComponent, ref } from "vue";

// import to get access to the router
import { useRouter } from "vue-router";

// define the component
export default defineComponent({

  // provide the name
  name: "Home",

  // provide the list of components being used in the
  // template
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
  },

  // setup function, It is called after props resolution, when 
  // instance of the component is created.
  setup() {
    const imageUrl = ref<string | null>();

    // get access to router
    const router = useRouter();

    // functions
    const nextPage = () => { };
    const takePicture = async () => { };

    // return the props and functions to component
    // so they are accessible in the template
    return {
      takePicture,
      imageUrl,
      nextPage,
    };
  },
});
</script>

// old way
this.$router.push("/next-page");

// new way
const router = useRouter();
router.push("/next-page");

<!-- in template -->
<div class="ion-padding">
   <img :src="imageUrl ? imageUrl : null" />
</div>

// in function
console.log(imageUrl.value);

// import
import { Plugins, CameraSource, CameraResultType } from "@capacitor/core";
const { Camera } = Plugins;

// code inside of `setup()`
const takePicture = async () => {
  try {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.DataUrl,
      source: CameraSource.Prompt,
    });
    console.log("image", image);
    // image.base64_data will contain the base64 encoded 
    // result as a JPEG, with the data-uri prefix added
    // unwrap to set the `value`
    imageUrl.value = image.dataUrl;

    // can be set to the src of an image now
    console.log(image);
  } catch (e) {
    console.log("error", e);
  }
};

//main.ts
import { defineCustomElements } from '@ionic/pwa-elements/loader';


const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');

  defineCustomElements(window);
});