chore(vue): Improve error message when Clerk plugin is not installed (#6719)

Author: wobsoriano

.changeset/fuzzy-rivers-tell.md

@@ -0,0 +1,5 @@
+---
+"@clerk/vue": patch
+---
+
+Improved error message when Clerk plugin is not installed

packages/vue/src/components/controlComponents.ts

@@ -37,7 +37,7 @@ export const ClerkLoading = defineComponent((_, { slots }) => {
 });
 
 export const RedirectToSignIn = defineComponent((props: RedirectOptions) => {
-  const { sessionCtx, clientCtx } = useClerkContext();
+  const { sessionCtx, clientCtx } = useClerkContext('RedirectToSignIn');
 
   useClerkLoaded(clerk => {
     const hasSignedInSessions = clientCtx.value?.signedInSessions && clientCtx.value.signedInSessions.length > 0;

packages/vue/src/composables/__tests__/useClerkContext.test.ts

@@ -0,0 +1,46 @@
+import { render } from '@testing-library/vue';
+import { vi } from 'vitest';
+import { defineComponent } from 'vue';
+
+import { clerkPlugin } from '../../plugin';
+import { useClerkContext } from '../useClerkContext';
+
+describe('useClerkContext', () => {
+  it('should throw an error if the Clerk plugin is not installed', () => {
+    // Hide missing injection key warning
+    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+    const Component = defineComponent(() => {
+      useClerkContext('useAuth');
+      return () => null;
+    });
+
+    expect(() => render(Component)).toThrow(
+      '@clerk/vue: useAuth can only be used when the Vue plugin is installed. Learn more: https://clerk.com/docs/references/vue/clerk-plugin',
+    );
+
+    consoleSpy.mockRestore();
+  });
+
+  it('should return the context if the Clerk plugin is installed', () => {
+    const Component = defineComponent(() => {
+      useClerkContext('useAuth');
+      return () => null;
+    });
+
+    expect(() =>
+      render(Component, {
+        global: {
+          plugins: [
+            [
+              clerkPlugin,
+              {
+                publishableKey: 'pk_xxx',
+              },
+            ],
+          ],
+        },
+      }),
+    ).not.toThrow();
+  });
+});

packages/vue/src/composables/useAuth.ts

@@ -74,7 +74,7 @@ type UseAuth = (options?: PendingSessionOptions) => ToComputedRefs<UseAuthReturn
  * </template>
  */
 export const useAuth: UseAuth = (options = {}) => {
-  const { clerk, authCtx } = useClerkContext();
+  const { clerk, authCtx } = useClerkContext('useAuth');
 
   const getToken: GetToken = createGetToken(clerk);
   const signOut: SignOut = createSignOut(clerk);

packages/vue/src/composables/useClerk.ts

@@ -18,7 +18,7 @@ import { useClerkContext } from './useClerkContext';
  * </template>
  */
 export const useClerk = () => {
-  const { clerk } = useClerkContext();
+  const { clerk } = useClerkContext('useClerk');
 
   return clerk;
 };

packages/vue/src/composables/useClerkContext.ts

@@ -1,13 +1,14 @@
 import { inject } from 'vue';
 
+import { errorThrower } from '../errors/errorThrower';
 import { ClerkInjectionKey } from '../keys';
 
-export function useClerkContext() {
+export function useClerkContext(source: string) {
   const ctx = inject(ClerkInjectionKey);
 
   if (!ctx) {
-    throw new Error(
-      'This component/composable can only be used when the Vue plugin is installed. Learn more: https://clerk.com/docs/quickstarts/vue',
+    return errorThrower.throw(
+      `${source} can only be used when the Vue plugin is installed. Learn more: https://clerk.com/docs/references/vue/clerk-plugin`,
     );
   }
 

packages/vue/src/composables/useOrganization.ts

@@ -53,7 +53,7 @@ type UseOrganization = () => ToComputedRefs<UseOrganizationReturn>;
  * </template>
  */
 export const useOrganization: UseOrganization = () => {
-  const { clerk, organizationCtx } = useClerkContext();
+  const { clerk, organizationCtx } = useClerkContext('useOrganization');
   const { session } = useSession();
 
   const result = computed<UseOrganizationReturn>(() => {

packages/vue/src/composables/useSession.ts

@@ -33,7 +33,7 @@ type UseSession = () => ToComputedRefs<UseSessionReturn>;
  * </template>
  */
 export const useSession: UseSession = () => {
-  const { sessionCtx, clerk } = useClerkContext();
+  const { sessionCtx, clerk } = useClerkContext('useSession');
 
   const result = computed<UseSessionReturn>(() => {
     if (sessionCtx.value === undefined) {

packages/vue/src/composables/useSessionList.ts

@@ -32,7 +32,7 @@ type UseSessionList = () => ToComputedRefs<UseSessionListReturn>;
  * </template>
  */
 export const useSessionList: UseSessionList = () => {
-  const { clerk, clientCtx } = useClerkContext();
+  const { clerk, clientCtx } = useClerkContext('useSessionList');
 
   const result = computed<UseSessionListReturn>(() => {
     if (!clientCtx.value) {

packages/vue/src/composables/useSignIn.ts

@@ -30,7 +30,7 @@ type UseSignIn = () => ToComputedRefs<UseSignInReturn>;
  * </template>
  */
 export const useSignIn: UseSignIn = () => {
-  const { clerk, clientCtx } = useClerkContext();
+  const { clerk, clientCtx } = useClerkContext('useSignIn');
 
   const unwatch = watch(clerk, value => {
     if (value) {