Help separating drawers from Index.vue

[limjackson]

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

[rstoenescu]

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

[limjackson]

Alright, thanks. I’ll look into it.
I assume it’s somewhere in here: https://vuejs.org/v2/guide/events.html

[limjackson]

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.