sahrullahh / windzo

Free Open Source Template Dashboard Admin Vue Tailwind CSS
https://windzo.vercel.app
MIT License
103 stars 36 forks source link

Using modal in dashboard.vue not working #17

Open xpediteur opened 11 months ago

xpediteur commented 11 months ago

Hi sahrullahh, this is really great dashboard. THX for it. I am using it for my app. But one problem. I want to use the modal in the dashboard component. I imported the modal.vue and placed the in the template but the modal window is not shown. Where to place the exactly in dashboard.vue? Can you help me here what I need to consider? Thank you. Many greetings Ralf

sahrullahh commented 5 months ago

Hi 👋, Thank you for using my dashboard Windzo. Sorry, I didn't reply until recently because I was busy with other things. Has the error been solved or not?

If still not, try doing it like this

Import the modal components first

import Modal from "@/components/modal.vue";

and the second step is to make sure the component has been registered from the components

components: {
  Icon,
  Modal,
},

and you are free to place the component elements anywhere and make sure the props you use are correct, this could be your problem from there.

and should be like this

<Modal
  title="Login"
  subtitle="log in your account to continue"
  btnTextSubmit="Login"
  btnText="Launch Modal form"
>
  <template v-slot:body>
    <div class="space-y-5 pb-5">
      <div class="space-y-3">
        <p>Email</p>
        <input
          type="text"
          placeholder=""
          class="p-2 border dark:border-gray-600 dark:bg-gray-700 w-full rounded outline-none"
        />
      </div>
      <div class="space-y-3">
        <p>Password</p>
        <input
          type="password"
          placeholder=""
          class="p-2 border dark:border-gray-600 dark:bg-gray-700 w-full rounded outline-none"
        />
      </div>
    </div>
  </template>
</Modal>

here the previews

image