chore: use wrapped ui components

Author: wobsoriano

integration/templates/nuxt-node/app/middleware/auth.global.js

@@ -2,7 +2,7 @@ export default defineNuxtRouteMiddleware(to => {
   const { userId } = useAuth();
 
   const isPublicPage = createRouteMatcher(['/sign-in(.*)', '/sign-up(.*)']);
-  const isProtectedPage = createRouteMatcher(['/user-profile(.*)', '/organization-profile(.*)']);
+  const isProtectedPage = createRouteMatcher(['/user-profile(.*)']);
 
   // Is authenticated and trying to access a public page
   if (userId.value && isPublicPage(to)) {

…tes/nuxt-node/app/pages/hash/sign-in.vue …ode/app/pages/hash/sign-in/[...slug].vueintegration/templates/nuxt-node/app/pages/hash/sign-in.vue renamed to integration/templates/nuxt-node/app/pages/hash/sign-in/[...slug].vue integration/templates/nuxt-node/app/pages/hash/sign-in.vue renamed to integration/templates/nuxt-node/app/pages/hash/sign-in/[...slug].vue

@@ -1,3 +1,3 @@
 <template>
-  <SignIn path="/sign-in" />
+  <SignIn signUpUrl="/sign-up" />
 </template>

integration/templates/nuxt-node/app/pages/organization-profile/[...slug].vue

@@ -1,3 +1,3 @@
 <template>
-  <SignUp path="/sign-up" />
+  <SignUp signInUrl="/sign-in" />
 </template>

integration/templates/nuxt-node/app/pages/sign-in/[...slug].vue

@@ -3,7 +3,7 @@ const { data: user } = await useFetch('/api/me');
 </script>
 
 <template>
-  <UserProfile path="/user-profile" />
+  <UserProfile />
   <ul>
     <li>First name: {{ user.firstName }}</li>
     <li>Email: {{ user.emailAddresses[0].emailAddress }}</li>

integration/templates/nuxt-node/app/pages/sign-up/[...slug].vue

@@ -137,11 +137,28 @@ export default defineNuxtModule<ModuleOptions>({
       },
     ]);
 
-    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-    const components: Array<keyof typeof import('@clerk/vue')> = [
-      // Authentication Components
+    // Components that use path-based routing (wrapped components)
+    const wrappedComponents = [
       'SignIn',
       'SignUp',
+      'UserProfile',
+      'OrganizationProfile',
+      'CreateOrganization',
+      'OrganizationList',
+    ] as const;
+
+    wrappedComponents.forEach(component => {
+      void addComponent({
+        name: component,
+        export: component,
+        filePath: resolver.resolve('./runtime/components'),
+      });
+    });
+
+    // Other components exported directly from @clerk/vue
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    const otherComponents: Array<keyof typeof import('@clerk/vue')> = [
+      // Authentication Components
       'GoogleOneTap',
       // Unstyled Components
       'SignInButton',
@@ -150,12 +167,8 @@ export default defineNuxtModule<ModuleOptions>({
       'SignInWithMetamaskButton',
       // User Components
       'UserButton',
-      'UserProfile',
       // Organization Components
-      'CreateOrganization',
-      'OrganizationProfile',
       'OrganizationSwitcher',
-      'OrganizationList',
       // Billing Components
       'PricingTable',
       // Control Components
@@ -170,10 +183,8 @@ export default defineNuxtModule<ModuleOptions>({
       'SignedIn',
       'SignedOut',
       'Waitlist',
-      // API Keys Components
-      'APIKeys',
     ];
-    components.forEach(component => {
+    otherComponents.forEach(component => {
       void addComponent({
         name: component,
         export: component,