vuetifyjs/vuetify · critical · Error

Could not find Vuetify display injection

Error message

Could not find Vuetify display injection

What it means

Thrown by useDisplay() when inject(DisplaySymbol) is undefined. The display reactive object (width, mobile, breakpoints) is created and provided by createVuetify() as part of the Vuetify install. Without the plugin, no display state exists.

Source

Thrown at packages/vuetify/src/composables/display.ts:235

  return { ...toRefs(state), update, ssr: !!ssr }
}

export const makeDisplayProps = propsFactory({
  mobile: {
    type: Boolean as PropType<boolean | null>,
    default: false,
  },
  mobileBreakpoint: [Number, String] as PropType<number | DisplayBreakpoint>,
}, 'display')

export function useDisplay (
  props: DisplayProps = { mobile: null },
  name = getCurrentInstanceName(),
) {
  const display = inject(DisplaySymbol)

  if (!display) throw new Error('Could not find Vuetify display injection')

  const mobile = computed(() => {
    if (props.mobile) {
      return true
    } else if (typeof props.mobileBreakpoint === 'number') {
      return display.width.value < props.mobileBreakpoint
    } else if (props.mobileBreakpoint) {
      return display.width.value < display.thresholds.value[props.mobileBreakpoint]
    } else if (props.mobile === null) {
      return display.mobile.value
    } else {
      return false
    }
  })

  const displayClasses = toRef(() => {
    if (!name) return {}

View on GitHub (pinned to 8d153908df)

Solutions

1. Install Vuetify: `app.use(createVuetify())`.
2. Ensure any component using useDisplay() is mounted under that app root.
3. For sub-apps/modals, install Vuetify on each createApp that renders Vuetify components.

Example fix

// before
createApp(App).mount('#app')

// after
import { createVuetify } from 'vuetify'
createApp(App).use(createVuetify()).mount('#app')

import { inject } from 'vue'
import { DisplaySymbol } from 'vuetify/composables/display'
function vuetifyDisplayInstalled(): boolean {
  return inject(DisplaySymbol, null) != null
}

import { inject } from 'vue'
import { DisplaySymbol } from 'vuetify/composables/display'
function hasDisplayProvider(): boolean {
  return inject(DisplaySymbol, null) != null
}

try {
  useDisplay()
} catch (e) {
  if (e instanceof Error && /Could not find Vuetify display injection/.test(e.message)) {
    // install Vuetify, or use a media-query fallback
  } else throw e
}

When it happens

Trigger: Calling useDisplay() (directly or via any component that uses it — VNavigationDrawer, VDialog, VAppBar, etc.) in an app where createVuetify() was not installed, or in a component mounted outside the Vuetify app root.

Common situations: Forgetting app.use(vuetify), separate createApp instances (modals, popouts) without Vuetify, SSR setups missing the plugin, or duplicate Vuetify installs breaking symbol identity.

Related errors

• [Vuetify] Could not find injected date options
• [Vuetify] Could not find defaults instance
• [Vuetify] Could not find injected goto instance
• [Vuetify] Could not find useGroup injection with symbol ${in
• foo

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