InAppBrowser with vue? Sample

I got just the react sample.

Could someone share with me how to use with vue js? I would like to put my wordpress site in an app via inAppBrowser.

I used to face the problem without any documents ( includes google, StackOverflow, ionic communicate, vue Team or maybe youtube…) talk about how to use InAppBrowser Plugins by using vue be the framework. That time is very hard for me don’t know the structure of how to build InAppBrowser.

Then the only way I have is to watch youtube how people use InAppBrowser with Angular and I modify it to vue.

For me just simple like this:
for “Cordova”

const browser = InAppBrowser.create('url', '_blank', '{ location: no }');
browser.on('loadstart').subscribe(e => {
     console.log(e);
     // some code....
} );

browser.on('loadstop').subscribe(e => {
    console.log('loadstop', e);
    // test for native phone
    alert('loadstop', e) // test if I click the button or after router that link then auto browser in 
    App
});

browser.on('exit').subscribe(() => {
    browser.close();
})

Above you can use with Capacitor, but the setup just like Cordova.
with this code. U are just only able to use in native that will be got errors in the browser if you wanna test by the browser.

the error message is said that subscribe will undefined or maybe not a function.

Below just for Capacitor
And if you wanna using Capacitor, below is the link direct to Capacitor how to use Browser (just like InAppBrowser)
https://capacitorjs.com/docs/apis/browser

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
  await Browser.open({ url: 'http://capacitorjs.com/' });
};
2 Likes

Thanks for helping, i will try!

Let me know if you need any additional help. I have both the Cordova InAppBrowser and Capacitor Browser working in Vue.

2 Likes

Hi @twestrick, I think I need help. I did exactly as mentioned above but my InAppBrowser.create is undefined. What should I do. Here’s my code in vue 3

import { InAppBrowser } from “@ionic-native/in-app-browser”;

export default defineComponent({
name: “LoginView”,
setup() {
const url: Ref = ref("");
const securityService: SecurityService = container.get(
TYPES.SecurityService
);

const loginHandle = async () => {
const signInRequest = await securityService.createSignInRequest();
const browser = InAppBrowser.create(signInRequest.url, “_self”, {
location: “no”,
});
browser.on(“loadstart”).subscribe((event) => {
if (event.url.includes("#code")) {
url.value = event.url;
browser.close();
}
});
};

return {
loginHandle,
};
},

});

I think you need to declare browser outside of your loginHandle method.

Here is the code I am using:

<template>
    <div class="text-center">
        <ion-button @click="showWebpage">View on the web</ion-button>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { InAppBrowser, InAppBrowserObject, InAppBrowserOptions } from '@ionic-native/in-app-browser'
import { IonButton } from '@ionic/vue'
import { LoadingComponent } from '@/utils/loading-component'
import { toastControllerInstance } from '@/instances'
import { ToastType } from '@/utils/toast-controller'

export default defineComponent({
    name: 'WebViewer',
    components: {
        IonButton,
    },
    props: {
        url: {
            type: String,
            required: true,
        },
    },
    emits: {
        onBrowserClose: null,
    },
    setup(props, { emit }) {
        let browser: InAppBrowserObject

        const showWebpage = (): void => {
            const options: InAppBrowserOptions = {
                location: 'yes',
                closebuttoncaption: 'Close',
                hidenavigationbuttons: 'yes',
                hideurlbar: 'yes',
            }

            let loader: LoadingComponent

            loader = new LoadingComponent({ definedText: 'Loading' })
            loader.present()

            browser = InAppBrowser.create(props.url, '_blank', options)

            browser.on('loadstop').subscribe(() => {
                loader.dismiss()
                browser.show()
            })

            browser.on('loaderror').subscribe(() => {
                toastControllerInstance.createWithJustMessage(
                    'An error ocurred while trying to load the external website.',
                    ToastType.Error
                )
                loader.dismiss()
            })

            browser.on('exit').subscribe(() => {
                emit('onBrowserClose')
            })
        }

        return {
            // Methods
            showWebpage,
        }
    },
})
</script>
2 Likes

Hi twestrick, Thanks for the reply. I solved the issue.

1 Like

@damith-a I tried to make conditional when onload on browser already stop and then it will help check the conditional. In my way just like the below code:

const makeBrowser = InAppBrowser();

    const clickOpenPage = async () => {

      const browser = await makeBrowser.create("url", "_selft", { location: "no" });

      browser.on("loadstart").subscribe((event) => {

        alert("your browser initial is ready open link direction: ", event.url);

      });

      browser.on("loadstop").subscribe((event) => {

        let browserBoolean = false;

        if (event.url.indexOf("url") !== -1 && !browserBoolean) {

          // if it make current link on InAppBrowser

          alert("your match the current link from inAppBrowser: ", event.url);

          browser.close();

        }

      });

    };
1 Like

This is really useful. Thanks @whitersun

1 Like