Godofbrowser / vuejs-dialog

A lightweight, promise based alert, prompt and confirm dialog
351 stars 109 forks source link

Cannot render custom component #83

Closed computurus closed 3 years ago

computurus commented 3 years ago

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.


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)

Method to trigger the dialog


this.$dialog.alert( {
        view: customView, // can be set globally too
        html: false,
        animation: 'fade',
        okText: "123 cdasd",
        cancelText: "31 dsad",
        backdropClose: true
      });

HDSLogin.vue

<template>
    <div >
        <p>
       content bla blad
       sa
       dsa
       d
       as
      </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>

Blank dialog is displayed: