vuetifyjs/vuetify · error · Error

[Vuetify] VWindowItem must be used inside VWindow

Error message

[Vuetify] VWindowItem must be used inside VWindow

What it means

VWindowItem injects VWindowSymbol and also calls useGroupItem for VWindowGroupSymbol. It throws when either is missing, i.e. <v-window-item> is rendered outside <v-window>, because the item needs the window's transition/reverse/booted state and its group registration.

Source

Thrown at packages/vuetify/src/components/VWindow/VWindowItem.tsx:49

}, 'VWindowItem')

export const VWindowItem = genericComponent()({
  name: 'VWindowItem',

  directives: { vTouch },

  props: makeVWindowItemProps(),

  emits: {
    'group:selected': (val: { value: boolean }) => true,
  },

  setup (props, { slots }) {
    const window = inject(VWindowSymbol)
    const groupItem = useGroupItem(props, VWindowGroupSymbol)
    const { isBooted } = useSsrBoot()

    if (!window || !groupItem) throw new Error('[Vuetify] VWindowItem must be used inside VWindow')

    const isTransitioning = shallowRef(false)
    const hasTransition = computed(() => isBooted.value && (
      window.isReversed.value
        ? props.reverseTransition !== false
        : props.transition !== false
    ))

    function onAfterTransition () {
      if (!isTransitioning.value || !window) {
        return
      }

      // Finalize transition state.
      isTransitioning.value = false
      if (window.transitionCount.value > 0) {
        window.transitionCount.value -= 1

View on GitHub (pinned to 8d153908df)

Solutions

1. Nest <v-window-item> inside <v-window>.
2. Keep teleported items within the window provide tree.
3. Wrap the item in <v-window> for tests.

Example fix

// before
<v-window-item>Step</v-window-item>

// after
<v-window>
  <v-window-item>Step</v-window-item>
</v-window>

import { inject } from 'vue'
import { VWindowSymbol } from 'vuetify'
const win = inject(VWindowSymbol, null)
if (!win) {
  // not inside <v-window>: render plain content without window transitions
}

import { inject } from 'vue'
import { VWindowSymbol } from 'vuetify'
export function isInsideWindow (): boolean {
  return inject(VWindowSymbol, null) != null
}

When it happens

Trigger: Rendering <v-window-item> outside <v-window>; teleporting it out of the window tree; testing it alone.

Common situations: Building a custom stepper/carousel and forgetting the <v-window> wrapper; copy-paste of a window item; refactoring that detaches the item.

Related errors

• [Vuetify] v-expansion-panel-text needs to be placed inside v
• [Vuetify] v-expansion-panel-title needs to be placed inside
• [Vuetify] VOtpField must be used inside VOtpInput
• [Vuetify] v-slider-thumb must be used inside v-slider or v-r
• [Vuetify] v-slider-track must be inside v-slider or v-range-

AI-assisted analysis of vuetifyjs/vuetify@8d153908df (2026-08-12). Data as JSON: /api/errors/00fed7f92f853b08. Report an issue: GitHub.