vuetifyjs/vuetify · error · Error

[Vuetify] Could not find injected layout

Error message

[Vuetify] Could not find injected layout

What it means

useLayout() calls Vue's inject() for VuetifyLayoutKey. That key is only provided by createLayout(), which runs inside <v-app> and <v-layout>. The composable throws when no such ancestor exists in the component tree, because the layout registry (mainRect, getLayoutItem, mainStyles) it wants to read from was never set up.

Source

Thrown at packages/vuetify/src/composables/layout.ts:93

  fullHeight: Boolean,
}, 'layout')

// Composables
export const makeLayoutItemProps = propsFactory({
  name: {
    type: String,
  },
  order: {
    type: [Number, String],
    default: 0,
  },
  absolute: Boolean,
}, 'layout-item')

export function useLayout () {
  const layout = inject(VuetifyLayoutKey)

  if (!layout) throw new Error('[Vuetify] Could not find injected layout')

  return {
    getLayoutItem: layout.getLayoutItem,
    mainRect: layout.mainRect,
    mainStyles: layout.mainStyles,
  }
}

export function useLayoutItem (options: {
  id: string | undefined
  order: Ref<number>
  position: Ref<Position>
  layoutSize: Ref<number | string>
  elementSize: Ref<number | string | undefined>
  active: Ref<boolean>
  disableTransitions?: Ref<boolean>
  absolute: Ref<boolean | undefined>
}) {

View on GitHub (pinned to 8d153908df)

Solutions

1. Wrap the component subtree in <v-app> (it provides the layout itself) or in <v-layout>.
2. Confirm app.use(createVuetify()) ran and that <v-app> is the template root.
3. In tests, mount the component under <v-app>, or provide VuetifyLayoutKey via the test wrapper.

Example fix

// before
<VMain>Hello</VMain>

// after
<v-app>
  <VMain>Hello</VMain>
</v-app>

// Run inside setup() before relying on the layout.
import { inject } from 'vue'
import { VuetifyLayoutKey } from 'vuetify'
const layout = inject(VuetifyLayoutKey, null)
if (!layout) {
  // No <v-app>/<v-layout> ancestor: render a fallback, do not call layout APIs.
  console.warn('Vuetify layout not provided')
}

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

When it happens

Trigger: Calling useLayout() directly, or rendering a component that calls it (e.g. <v-main>, <v-app-bar>, <v-navigation-drawer>, <v-footer>, <v-system-bar>), in a subtree that is not nested under <v-app> or <v-layout>. Also fires in component unit tests mounted without <v-app>.

Common situations: Forgetting to wrap the application template in <v-app>; mounting a single Vuetify layout-item component in a test harness; SSR render where the root component omits <v-app>; refactoring that moved a layout item outside the v-app tree.

Related errors

• foo
• Missing group!
• Missing headers!
• Missing pagination!
• Missing selection!

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