chore(nuxt): Re-export Vue components and composables (#4750)

.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

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",

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,

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';

packages/nuxt/src/runtime/composables/index.ts

@@ -0,0 +1 @@
+export { useAuth, useUser, useSession, useClerk, useSignIn, useSignUp, useOrganization } from '@clerk/vue';

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