Problems Occurring When Using the New Vuetify 3.5.9 with Nuxt3

[mulingyuer]

The new version of Vuetify lacks the [data-v-app] HTML container element, instead using:

<div class="v-overlay-container"></div>

In cases where this div element does not exist in the entire HTML context, it needs to be manually created and inserted into the body. If it exists, it can be used directly.

I adjusted the getVAppRoot method under utils as follows:

export const getVAppRoot = (): HTMLElement => {
  let overlayContainer = document.querySelector(".v-overlay-container");
  if (!overlayContainer) {
    overlayContainer = document.createElement("div");
    overlayContainer.classList.add("v-overlay-container");
    document.body.appendChild(overlayContainer);
  }
  return overlayContainer as HTMLElement;
};

Using this modified method, the module can be used in projects and works normally. If you do not want to change the module, you can create a div element yourself as a temporary solution:

Here is an example with Nuxt3:

<ClientOnly>
    <Teleport to="body">
      <div class="v-overlay-container" data-v-app></div>
    </Teleport>
  </ClientOnly>

I hope the author can fix this issue, but I am not sure if my solution is correct, although it works fine for now.

[kieuminhcanh]

Fixed. Update code for use.

[mulingyuer]

固定。更新代码以供使用。

The installation encountered an error while updating to version 0.0.12.：

 ERR_PNPM_LINKED_PKG_DIR_NOT_FOUND  Could not install from "E:\Code\xxxxx\src\plugins\vuetify-notifier" as it does not exist.

This error happened while installing the dependencies of vuetify-notifier@0.0.12

[kieuminhcanh]

@mulingyuer fixed.