From b34edd254d407613595cd567147a0a5f60d1a712 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Thu, 12 Dec 2024 07:51:40 -0800
Subject: [PATCH] chore(nuxt): Re-export Vue components and composables (#4750)

---
 .changeset/selfish-dingos-argue.md            |  5 ++++
 packages/nuxt/package.json                    |  8 +++++
 packages/nuxt/src/module.ts                   | 27 ++++-------------
 packages/nuxt/src/runtime/components/index.ts | 30 +++++++++++++++++++
 .../nuxt/src/runtime/composables/index.ts     |  1 +
 packages/nuxt/tsup.config.ts                  |  8 ++++-
 6 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/selfish-dingos-argue.md
 create mode 100644 packages/nuxt/src/runtime/components/index.ts
 create mode 100644 packages/nuxt/src/runtime/composables/index.ts

diff --git a/.changeset/selfish-dingos-argue.md b/.changeset/selfish-dingos-argue.md
new file mode 100644
index 0000000000..1af8bd3bd1
--- /dev/null
+++ b/.changeset/selfish-dingos-argue.md
@@ -0,0 +1,5 @@
+---
+"@clerk/nuxt": patch
+---
+
+Re-export Vue SDK components and composables to Nuxt SDK to support manual imports
diff --git a/packages/nuxt/package.json b/packages/nuxt/package.json
index d1bafbef65..a7d7f397b7 100644
--- a/packages/nuxt/package.json
+++ b/packages/nuxt/package.json
@@ -33,6 +33,14 @@
     "./server": {
       "types": "./dist/runtime/server/index.d.ts",
       "import": "./dist/runtime/server/index.js"
+    },
+    "./components": {
+      "types": "./dist/runtime/components/index.d.ts",
+      "import": "./dist/runtime/components/index.js"
+    },
+    "./composables": {
+      "types": "./dist/runtime/composables/index.d.ts",
+      "import": "./dist/runtime/composables/index.js"
     }
   },
   "main": "./dist/module.js",
diff --git a/packages/nuxt/src/module.ts b/packages/nuxt/src/module.ts
index ebcf22280d..bc606a1e4a 100644
--- a/packages/nuxt/src/module.ts
+++ b/packages/nuxt/src/module.ts
@@ -1,7 +1,7 @@
 import type { LoadClerkJsScriptOptions } from '@clerk/shared/loadClerkJsScript';
 import {
   addComponent,
-  addImports,
+  addImportsDir,
   addPlugin,
   addServerHandler,
   createResolver,
@@ -91,12 +91,11 @@ export default defineNuxtModule<ModuleOptions>({
       });
     }
 
-    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-    type VueClerkImports = Array<keyof typeof import('@clerk/vue')>;
-
     // Add auto-imports for Clerk components and composables
-    // More info https://nuxt.com/docs/guide/concepts/auto-imports
-    const components: VueClerkImports = [
+    addImportsDir(resolver.resolve('./runtime/composables'));
+
+    // eslint-disable-next-line @typescript-eslint/consistent-type-imports
+    const components: Array<keyof typeof import('@clerk/vue')> = [
       // Authentication Components
       'SignIn',
       'SignUp',
@@ -125,22 +124,6 @@ export default defineNuxtModule<ModuleOptions>({
       'SignedIn',
       'SignedOut',
     ];
-    const composables: VueClerkImports = [
-      'useAuth',
-      'useClerk',
-      'useSession',
-      'useSessionList',
-      'useSignIn',
-      'useSignUp',
-      'useUser',
-      'useOrganization',
-    ];
-    addImports(
-      composables.map(composable => ({
-        name: composable,
-        from: '@clerk/vue',
-      })),
-    );
     components.forEach(component => {
       void addComponent({
         name: component,
diff --git a/packages/nuxt/src/runtime/components/index.ts b/packages/nuxt/src/runtime/components/index.ts
new file mode 100644
index 0000000000..12d0e860a8
--- /dev/null
+++ b/packages/nuxt/src/runtime/components/index.ts
@@ -0,0 +1,30 @@
+export {
+  // UI components
+  SignUp,
+  SignIn,
+  UserProfile,
+  UserButton,
+  OrganizationSwitcher,
+  OrganizationProfile,
+  CreateOrganization,
+  OrganizationList,
+  GoogleOneTap,
+  Waitlist,
+  // Control components
+  ClerkLoaded,
+  ClerkLoading,
+  SignedOut,
+  SignedIn,
+  Protect,
+  RedirectToSignIn,
+  RedirectToSignUp,
+  RedirectToUserProfile,
+  AuthenticateWithRedirectCallback,
+  RedirectToCreateOrganization,
+  RedirectToOrganizationProfile,
+  // Unstyled components
+  SignInButton,
+  SignUpButton,
+  SignOutButton,
+  SignInWithMetamaskButton,
+} from '@clerk/vue';
diff --git a/packages/nuxt/src/runtime/composables/index.ts b/packages/nuxt/src/runtime/composables/index.ts
new file mode 100644
index 0000000000..a99cfd4d84
--- /dev/null
+++ b/packages/nuxt/src/runtime/composables/index.ts
@@ -0,0 +1 @@
+export { useAuth, useUser, useSession, useClerk, useSignIn, useSignUp, useOrganization } from '@clerk/vue';
diff --git a/packages/nuxt/tsup.config.ts b/packages/nuxt/tsup.config.ts
index 183ba0c4a1..bae9cdacb9 100644
--- a/packages/nuxt/tsup.config.ts
+++ b/packages/nuxt/tsup.config.ts
@@ -5,7 +5,13 @@ import { name, version } from './package.json';
 export default defineConfig(() => {
   return {
     clean: true,
-    entry: ['./src/module.ts', './src/runtime/plugin.ts', './src/runtime/server/*.ts'],
+    entry: [
+      './src/module.ts',
+      './src/runtime/plugin.ts',
+      './src/runtime/components/index.ts',
+      './src/runtime/composables/index.ts',
+      './src/runtime/server/*.ts',
+    ],
     format: ['esm'],
     // Make sure to not bundle the imports
     // or else the Nuxt module will not be able to resolve them