Custom component iside vue js dialog

Question

I am using this vue js plugin: https://github.com/Godofbrowser/vuejs-dialog

Following the guide, I am trying to integrate a custom component into my dialog. The Dialog shows but no content or the custom component is displayed. Also, the configuration does not seem to work.

Am I missing something here? I followed the documentaion.

Here it the content of my main.js:

import VuejsDialog from 'vuejs-dialog';
import 'vuejs-dialog/dist/vuejs-dialog.min.css';

Vue.use(VuejsDialog);

import CustomView from '@/components/HDSLogin';
const customView = 'my-unique-view-name';
Vue.dialog.registerComponent(customView, CustomView)

Then I use the following method in my component to trigger the dialog

this.$dialog.alert( {
    view: customView, // can be set globally too, value is 'my-unique-view-name'
    html: false,
    animation: 'fade',
    okText: "Ok",
    cancelText: "Cancel",
    backdropClose: true
});

And I define my CustomView component in HdsLogin.vue:

<template>
    <div >
        <p>Content</p>
    </div>
</template>

<script>
// import into project
import Vue from 'vue';
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
Vue.use(VuejsDialog);

export default {
  mixins: [VuejsDialogMixin],
};
</script>

<style scoped="">
button {
  width: 100%;
  margin-bottom: 10px;
  float: none;
}
</style>

With the above setup a blank dialog is displayed:

Answer 1

This one was far from easy to spot. But you made a small typo following the examples.

The this.$dialog.alert() takes 2 parameters, its definition is:

Plugin.prototype.alert = function (message = null, options = {}) {
    message && (options.message = message)
    return this.open(DIALOG_TYPES.ALERT, options)
}

So you have to define the first parameter (as null for example), before defining the options.

Your call should then look like:

-  this.$dialog.alert( {
+  this.$dialog.alert(null, {
    view: customView, // can be set globally too
    html: false,
    animation: 'fade',
    okText: "Ok",
    cancelText: "Cancel",
    backdropClose: true
  });

Also, You may not need all those imports in your HdsLogin component.