Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Using modal in dashboard.vue not working #17

Open
xpediteur opened this issue Sep 28, 2023 · 1 comment
Open

Using modal in dashboard.vue not working #17

xpediteur opened this issue Sep 28, 2023 · 1 comment

Comments

@xpediteur
Copy link

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
Copy link
Owner

sahrullahh commented Mar 20, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants