Skip to content

Commit aa9ff12

Browse files
authored
fix(vue): Make Clerk component options deeply reactive (#6588)
1 parent c28d29c commit aa9ff12

File tree

2 files changed

+27
-17
lines changed

2 files changed

+27
-17
lines changed

.changeset/friendly-penguins-wash.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@clerk/vue": patch
3+
---
4+
5+
Fixes an issue where deep updates to Clerk component options are not reactive.

packages/vue/src/components/ClerkHostRenderer.ts

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import type { PropType } from 'vue';
2-
import { defineComponent, h, onScopeDispose, ref, toRef, watchEffect } from 'vue';
2+
import { defineComponent, h, onUnmounted, ref, watch, watchEffect } from 'vue';
33

44
import type { CustomPortalsRendererProps } from '../types';
55
import { ClerkLoaded } from './controlComponents';
@@ -44,30 +44,35 @@ export const ClerkHostRenderer = defineComponent({
4444
},
4545
setup(props) {
4646
const portalRef = ref<HTMLDivElement | null>(null);
47-
const isPortalMounted = ref(false);
48-
// Make the props reactive so the watcher can react to changes
49-
const componentProps = toRef(props, 'props');
47+
let isPortalMounted = false;
5048

5149
watchEffect(() => {
52-
if (!portalRef.value) {
50+
// Skip if portal element isn't ready or component is already mounted
51+
if (!portalRef.value || isPortalMounted) {
5352
return;
5453
}
5554

56-
if (isPortalMounted.value) {
57-
props.updateProps?.({ node: portalRef.value, props: componentProps.value });
58-
} else {
59-
if (props.mount) {
60-
props.mount(portalRef.value, componentProps.value);
61-
}
62-
if (props.open) {
63-
props.open(componentProps.value);
64-
}
65-
isPortalMounted.value = true;
55+
if (props.mount) {
56+
props.mount(portalRef.value, props.props);
57+
}
58+
if (props.open) {
59+
props.open(props.props);
6660
}
61+
isPortalMounted = true;
6762
});
6863

69-
onScopeDispose(() => {
70-
if (isPortalMounted.value && portalRef.value) {
64+
watch(
65+
() => props.props,
66+
newProps => {
67+
if (isPortalMounted && props.updateProps && portalRef.value) {
68+
props.updateProps({ node: portalRef.value, props: newProps });
69+
}
70+
},
71+
{ deep: true },
72+
);
73+
74+
onUnmounted(() => {
75+
if (isPortalMounted && portalRef.value) {
7176
if (props.unmount) {
7277
props.unmount(portalRef.value);
7378
}

0 commit comments

Comments
 (0)