[Vuejs]-Accessing method in component with Provide/Inject in Vue 3 Typescript, Error Object is possibly 'undefined'

0👍

The problem is that authPlugin and Auth0 are unrelated objects.

It should be either provide('authPlugin', authPlugin) and inject<typeof authPlugin>('authPlugin'), or provide('authPlugin', Auth0) and inject<typeof Auth0>('authPlugin').

In this case inject is not even needed. It’s commonly used for loose coupling in third-party plugins, can also be used for deep dependency injection in nested components. Unless it’s required by application design for auth to be a separate package, it doesn’t need to be a plugin and provide/inject. Since authPlugin is defined when a module is evaluated, it can be just exported from auth module and imported where it’s used.

Leave a comment