Vue useInert Composable

A composable wrapper around InertController (see the web-modals skill) that gives each component its own instance while sharing the same underlying counter on the target element.

When to use

Use this composable in any modal or overlay component that needs to make background content non-interactive while open. It pairs with useScrollLock() for a complete open/close sequence and correctly handles nested modals through ref-counted inert state on the target element.

The pattern

Using useInert()

useInert() returns an InertController bound to a target element. Call on() when a modal opens and off() when it closes. The background stays inert as long as at least one layer is active:

import { useInert } from "./use-inert.js";

const inert = useInert();

async function open() {
  dialog.show();
  inert.on();
}

async function close() {
  dialog.close();
  inert.off();
}

Implementing useInert()

The composable creates and returns a new InertController instance. Pass an options object with a selector property to target a specific container instead of the default:

import { InertController } from "./inert-controller.js";

export function useInert(options = {}) {
  return new InertController(options.selector);
}