Help separating drawers from Index.vue

  • Hi guys, currently I have a drawer working in my Index.vue file. However, how do I separate it into another component such that I can still use a button from Index.vue to open and close the drawer, and also able to implement classes such as the hide-on-drawer-visible class though the drawer is being called from another component? All I can get now is the drawer being displayed permanently on the page

    Edit: Alright, I can make my main drawer hide when the screen is small and show when the screen is big enough. However, I still can’t wrap my head how to close/open a drawer that is being referenced from another component and also have it to hide when the screen is big enough

  • Admin

    You need to communicate between Vue components. There’s a section on how to use events in the Vue documentation website.

  • Alright, thanks. I’ll look into it.
    I assume it’s somewhere in here:

  • I managed to solve my problem but the drawer component in my other .vue file is not tagged with <q-drawer>, just a <div> instead. Then I referenced that in a <q-drawer> in Index.vue. It’s definitely not the right way but it solves my issue.

Log in to reply