How to use javascript method trigger to call vuejs method in laravel blade

I am using google oauth2 authorization in a pop-up window. I am trying to learn VueJS so the following code might have issues (if you spot them please be kind and point them)

How can I hide the Sign in with Google button using vue when the authorization is completed?


<redirect-to-provider route="{{route('auth.scopes.redirect')}}" provider="google"></redirect-to-provider>


    <button v-on:click="popUpRedirect" class="btn btn-primary">
        Sign in with Google

    export default {
        props: {
            route: {
                required: true,
            provider: {
                required: true,
                default: "google"
            scopes: {
                default: '',
        mounted() {
            console.log('Component mounted.')
        methods: {
            popUpRedirect: function () {
                    this.route+"?provider="+this.provider+'&scopes[]='+this.scopes, '_blank',


                    window.onunload = function() {
                        var win = window.opener;
                        if (!win.closed) {
                            win.console.log('signed in successfully');

So a the vue component renders a button. I click it and a pop-up window opens and redirects to google. I do the authorization flow and returns me to callback.blade.php. If user granted permissions I send to login.blade.php a console message with signed in successfully and then I do a window.close();

I could hide the button using a javascript method instead of console.log('signed in successfully'); but I cannot figure out how to use VueJS instead.



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.