Uncaught (in promise) TypeError: Cannot read property 'confirm' of undefined

[leekh7]

Hello

Thanks for your component

I am try
npm install -> import and vue.use ->this.$dialog.confirm('The alert message')

Next having issues

Uncaught (in promise) TypeError: Cannot read property 'confirm' of undefined

help me please

[damonbakker]

I had the same issue in terms of using $dialog, it was undefined for me too.

I fixed it by using Vue.dialog instead.
Vue.dialog.confirm('The alert message')

I think $dialog actually retuns Vue.dialog under the hood but I'm not sure.

[razor9999]

same issue

[Godofbrowser]

Hello @leekh7 and @razor9999 Please be sure to have installed the plugin as earlier as possible before trying to use it. If you're importing your modules, here's a common cause for this issue:

Case 1.

    /* ./plugins.js */


    import Vue from "vue"
    import VuejsDialog from 'vuejs-dialog'

    // ... other plugin installation

    // Install VuejsDialog
    Vue.use(VuejsDialog, {
        message: 'Please confirm action'
    })

    // ... other plugin installation

    /* ./app.js */

    import Vue from "vue"

    window.vm = new Vue({
        el: '#app',
        mounted() {
            this.$dialog.confirm()
                .then(() => console.debug('yes'))
                .catch(() => console.error('no'))
        }
    })

    /* ./index.js */


    import "./plugins"; // must come first
    import "./app";

case 2:

/* ./plugins.js */

import Vue from "vue"
import VuejsDialog from 'vuejs-dialog'

export default function () {
    // ... other plugin installation

    // Install VuejsDialog
    Vue.use(VuejsDialog, {
        message: 'Please confirm action'
    })

    // ... other plugin installation
}

    /* ./app.js */


import Vue from "vue"

export default function() {
    window.vm = new Vue({
        el: '#app',
        mounted() {
            this.$dialog.confirm()
                .then(() => console.debug('yes'))
                .catch(() => console.error('no'))
        }
    })
}

    /* ./index.js */

    import app from "./app";
    import plugins from "./plugins";

    plugins();
    // filters();
    // directives();
    app(); // Should be the last to get invoked

[Godofbrowser]

@damonbakker That's correct. The plugin is available in the global Vue object from the moment it was installed and can be accessed from any where ... And that brings about the ability to use vuejs dialog outside vue applications. This way, it can also be used in jquery apps, reactjs apps, and even vanilla js.