{"record":{"id":"01cd27cd6bcaeb56","repo":"vuetifyjs/vuetify","slug":"could-not-find-vuetify-display-injection","errorCode":null,"errorMessage":"Could not find Vuetify display injection","messagePattern":"Could not find Vuetify display injection","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"packages/vuetify/src/composables/display.ts","lineNumber":235,"sourceCode":"\n  return { ...toRefs(state), update, ssr: !!ssr }\n}\n\nexport const makeDisplayProps = propsFactory({\n  mobile: {\n    type: Boolean as PropType<boolean | null>,\n    default: false,\n  },\n  mobileBreakpoint: [Number, String] as PropType<number | DisplayBreakpoint>,\n}, 'display')\n\nexport function useDisplay (\n  props: DisplayProps = { mobile: null },\n  name = getCurrentInstanceName(),\n) {\n  const display = inject(DisplaySymbol)\n\n  if (!display) throw new Error('Could not find Vuetify display injection')\n\n  const mobile = computed(() => {\n    if (props.mobile) {\n      return true\n    } else if (typeof props.mobileBreakpoint === 'number') {\n      return display.width.value < props.mobileBreakpoint\n    } else if (props.mobileBreakpoint) {\n      return display.width.value < display.thresholds.value[props.mobileBreakpoint]\n    } else if (props.mobile === null) {\n      return display.mobile.value\n    } else {\n      return false\n    }\n  })\n\n  const displayClasses = toRef(() => {\n    if (!name) return {}\n","sourceCodeStart":217,"sourceCodeEnd":253,"githubUrl":"https://github.com/vuetifyjs/vuetify/blob/8d153908dffb7592eb389ddbfbab955a0ccc977f/packages/vuetify/src/composables/display.ts#L217-L253","documentation":"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.","triggerScenarios":"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.","commonSituations":"Forgetting app.use(vuetify), separate createApp instances (modals, popouts) without Vuetify, SSR setups missing the plugin, or duplicate Vuetify installs breaking symbol identity.","solutions":["Install Vuetify: `app.use(createVuetify())`.","Ensure any component using useDisplay() is mounted under that app root.","For sub-apps/modals, install Vuetify on each createApp that renders Vuetify components."],"exampleFix":"// before\ncreateApp(App).mount('#app')\n\n// after\nimport { createVuetify } from 'vuetify'\ncreateApp(App).use(createVuetify()).mount('#app')","handlingStrategy":"type-guard","validationCode":"import { inject } from 'vue'\nimport { DisplaySymbol } from 'vuetify/composables/display'\nfunction vuetifyDisplayInstalled(): boolean {\n  return inject(DisplaySymbol, null) != null\n}","typeGuard":"import { inject } from 'vue'\nimport { DisplaySymbol } from 'vuetify/composables/display'\nfunction hasDisplayProvider(): boolean {\n  return inject(DisplaySymbol, null) != null\n}","tryCatchPattern":"try {\n  useDisplay()\n} catch (e) {\n  if (e instanceof Error && /Could not find Vuetify display injection/.test(e.message)) {\n    // install Vuetify, or use a media-query fallback\n  } else throw e\n}","preventionTips":["Always app.use(createVuetify()) before mounting.","Install Vuetify on sub-apps that render its components.","Avoid duplicate installs to keep symbol identity."],"tags":["vuetify","injection","setup","display"],"backgroundTag":null,"analyzedSha":"8d153908dffb7592eb389ddbfbab955a0ccc977f","analyzedAt":"2026-08-12T21:54:20.596Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}