I have implemented a custom component using the Vue.js plugin found at https://github.com/Godofbrowser/vuejs-dialog
Despite following the guide provided, I am facing an issue where the Dialog appears but does not display any content or the custom component. Additionally, the configuration settings do not seem to be taking effect.
Could there be something that I am overlooking? I have carefully followed the documentation provided.
Below is the snippet from 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)
Subsequently, I am utilizing the following method within my component in order to trigger the dialog
this.$dialog.alert( {
view: customView,
html: false,
animation: 'fade',
okText: "Ok",
cancelText: "Cancel",
backdropClose: true
});
Furthermore, I have defined my CustomView component within HdsLogin.vue:
<template>
<div>
<p>Content</p>
</div>
</template>
<script>
// Importing necessary modules
import Vue from 'vue';
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js';
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>
Despite the above configuration, only a blank dialog is being displayed: