How to toggle model or drawer based on a Pinia store state?
Hi, I'm using Mertonic Vue and I changed things up a bit in this project using Pinia with it. If I want a model or drawer to be shown based on the Pinia store state or maybe update the store state when a modal or drawer is toggled, how will I do that?
With regular javascript, I can simple use the Model class or the jQuery attribute to toggle a certain modal like in the bootstrap documentation so is there a helper or something for the Vue.js version of metronic?
Replies (3)
Hi,
We are planning to migrate our Metronic 8 Vue version to Pinia and Vite in the next release.
You can get a drawer instance for a drawer in your component and then use the show function to show the drawer.
import { DrawerComponent } from "@/assets/ts/components";
const drawer = DrawerComponent.getInstance("your_drawer_id");
drawer?.show();You can do the same with the modal window instance.
import { Modal } from "bootstrap";
if (modalEl.value) {
const myModal = new Modal(modalEl.value);
myModal.show();
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
Thank you Lauris, that's kinda what I was looking for. It's gonna include a lot of extra code this way but I can't wait for the Pinia and Vite update - that's what I'm using for my project at the moment, I've overridden most the pre-built Vuex stores and it works wonders.
Metronic 8 really is a beautiful and performant project.
Hi,
Glad to hear that. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
