{"record":{"id":"c5530401548a3afc","repo":"transloadit/uppy","slug":"uppycontextprovider-passing-uppy-as-a-prop-is-r","errorCode":null,"errorMessage":"UppyContextProvider: passing `uppy` as a prop is required","messagePattern":"UppyContextProvider: passing `uppy` as a prop is required","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@uppy/vue/src/headless/context-provider.ts","lineNumber":49,"sourceCode":"  },\n  setup(props, { slots }) {\n    const status = ref<UploadStatus>('init')\n    const progress = ref(0)\n\n    const uppyContext = reactive<UppyContext>({\n      uppy: markRaw(props.uppy),\n      status: 'init',\n      progress: 0,\n    })\n\n    // Provide the context immediately instead of in onMounted\n    provide(UppyContextSymbol, uppyContext)\n\n    let uppyEventAdapter: ReturnType<typeof createUppyEventAdapter> | undefined\n\n    onMounted(() => {\n      if (!props.uppy) {\n        throw new Error(\n          'UppyContextProvider: passing `uppy` as a prop is required',\n        )\n      }\n\n      uppyEventAdapter = createUppyEventAdapter({\n        uppy: props.uppy,\n        onStatusChange: (newStatus: UploadStatus) => {\n          status.value = newStatus\n          uppyContext.status = newStatus\n        },\n        onProgressChange: (newProgress: number) => {\n          progress.value = newProgress\n          uppyContext.progress = newProgress\n        },\n      })\n    })\n\n    onBeforeUnmount(() => {","sourceCodeStart":31,"sourceCodeEnd":67,"githubUrl":"https://github.com/transloadit/uppy/blob/5d4dedd02a1ac0ae022c75c54aca76558f88e256/packages/@uppy/vue/src/headless/context-provider.ts#L31-L67","documentation":"UppyContextProvider's setup throws in onMounted when no uppy prop was passed, because the Vue headless components require an Uppy instance provided at mount time to wire up the event adapter.","triggerScenarios":"Rendering <UppyContextProvider> without an :uppy prop (or with a prop that is undefined at mount), e.g. <UppyContextProvider> instead of <UppyContextProvider :uppy=\"uppy\">.","commonSituations":"Vue 3 apps migrating to @uppy/vue headless components; uppy instance created asynchronously so the prop is initially undefined; forgetting the prop entirely.","solutions":["Pass the Uppy instance: <UppyContextProvider :uppy=\"uppy\">","If the instance loads async, render the provider only once it exists: <UppyContextProvider v-if=\"uppy\" :uppy=\"uppy\"> or supply a default instance from composable useUppy()"],"exampleFix":"// before\n<UppyContextProvider><FileInput /></UppyContextProvider>\n// after\n<UppyContextProvider :uppy=\"uppy\"><FileInput /></UppyContextProvider>","handlingStrategy":"validation","validationCode":"const uppy = useUppy() // ensure instance before render\n// template: <UppyContextProvider v-if=\"uppy\" :uppy=\"uppy\">","typeGuard":"const hasUppyProp = (p: { uppy?: unknown }): p is { uppy: object } => p.uppy instanceof Object","tryCatchPattern":null,"preventionTips":["Create the Uppy instance eagerly in setup(), not lazily on mount","Gate the provider with v-if when the instance is async"],"tags":["vue","headless","provider","missing-prop"],"backgroundTag":"missing-required-prop","analyzedSha":"5d4dedd02a1ac0ae022c75c54aca76558f88e256","analyzedAt":"2026-08-28T12:18:41.267Z","schemaVersion":2},"datasetVersion":"2026-08-28T16:17:29.566Z"}