Okta-Vue plugin is dependant on a mixin. This means it's not compatible with the Vue Bundler Build Feature Flags, that disables the Vue Options API. Disabling the Options API results in a performance improvement.
Another concern is that the mixins' functions created, and beforeCreate are run by every component. This also means that handleAuthStateUpdate is being subscribed and unsubscribed by every component.
My suggestion is to move setup logic outside of the mixin. Add router to OktaVueOptions definition.
Example code for setup logic.
const authStateRef = shallowRef(oktaAuth.authStateManager.getAuthState())
// use shallowRef because we don't need to make authState deeply reactive.
// we are only updating authStateRef via handleAuthStateUpdate so we have no need for deep reactivity.
oktaAuth.authStateManager.subscribe(handleAuthStateUpdate)
async function handleAuthStateUpdate(authState: AuthState) {
authStateRef.value = authState
triggerRef(authStateRef)
}
Describe the feature request?
Okta-Vue plugin is dependant on a mixin. This means it's not compatible with the Vue Bundler Build Feature Flags, that disables the Vue Options API. Disabling the Options API results in a performance improvement.
Another concern is that the mixins' functions created, and beforeCreate are run by every component. This also means that handleAuthStateUpdate is being subscribed and unsubscribed by every component.
My suggestion is to move setup logic outside of the mixin. Add router to
OktaVueOptions
definition.Example code for setup logic.
Make the mixin have minimal code like this:
Another option would be to add a flags to use the Mixin or Provide. The provide code would look like:
Note, unwrapInjectedRef is a Temporary Config, that will be removed in vue 3.3. This note is only shown in the options api doc's.
New or Affected Resource(s)
/src/okta-vue.ts
Provide a documentation link
No response
Additional Information?
No response