Adding an html or body class when modal is opened

[mrleblanc101]

Hi,
I'd like to add a body class when a modal is opened, this is reposition my Toast container.
My toast are offset under my fixed header:

But if a modal trigger a Toast, I don't want the offset.

Currently:

Desired:

[mrleblanc101]

Took me a while, but I guess this is the solution:

import { createVfm, type Vfm } from 'vue-final-modal';

export default defineNuxtPlugin((nuxtApp) => {
    const vfm = createVfm() as Vfm;
    const { openedModals } = vfm;

    watch(openedModals, (opened) => {
        if (opened.length) {
            document.documentElement.classList.add('has-vfm');
        } else {
            document.documentElement.classList.remove('has-vfm');
        }
    });

    nuxtApp.vueApp.use(vfm);
});