Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

87
Views
Open global modal from mixin

I have created an authService mixin to call my api as logged-in user (using its token).

import ModalLogin from '@/components';

export default {
    components: {
        ModalLogin
    },
    data: function () {
        return {
        }
    },
    methods: { 
        authorizedGet(url) {
            if(!localStorage.getItem('user')) {
                ModalLogin.methods.show()
            } else {
                // ...
            }
        }
    }
}

In that mixin, if user is not authenticated, I'd like to open my modal login form from a component (define as a global component).

But, when it tries to do "show()", I get:

ModalLogin is not defined

EDIT:

Here is my ModalLogin component:

<template>
    <!--Form modal-->
    <!-- ... -->
</template>
<script>
import User from '../models/user';

  export default {
    name: "modalLogin",
    data() {
      return {
        user: new User('', ''),
        loading: false,
        message: ''
      };
    },
    methods: {
      handleLogin() {
        this.loading = true;
        this.$validator.validateAll().then(isValid => {
            if (!isValid) {
            this.loading = false;
            return;
            }

            if (this.user.username && this.user.password) {
            this.$store.dispatch('auth/login', this.user).then(
                () => {
                this.$router.push('/profile');
                },
                error => {
                this.loading = false;
                this.message =
                    (error.response && error.response.data) ||
                    error.message ||
                    error.toString();
                }
            );
            }
        });
      },
      showModal() {
        this.$refs['login-modal'].show()
      }
    }
  }
</script>
<style>
</style>

...which is defined as Global as of more components:

// ...
import ModalLogin from '@/components/ModalLogin.vue';
// ...
/**
 * You can register global components here and use them as a plugin in your main Vue instance
 */

const GlobalComponents = {
  install(Vue) {
    // ...
    Vue.component(ModalLogin.name, ModalLogin);
    // ...
  }
};

export default GlobalComponents;

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!