Nuxt•2mo ago

How to export types of an nuxt plugin?

So i'm using the better-auth, and for the client part, i created a nuxt plugin like this:

import { createAuthClient } from "better-auth/vue";
export default defineNuxtPlugin(() => {
  const authClient = createAuthClient({});

  return {
    provide: {
      authClient,
    },
  };
});

import { createAuthClient } from "better-auth/vue";
export default defineNuxtPlugin(() => {
  const authClient = createAuthClient({});

  return {
    provide: {
      authClient,
    },
  };
});

But how can i export/infer some types from authClient ? like if i just created this client in a lib/auth-client.ts i can easily do like this:

import { createAuthClient } from "better-auth/vue";

export const authClient = createAuthClient({});

export type AuthSession = (typeof authClient.$Infer.Session)["session"];
export type AuthUser = (typeof authClient.$Infer.Session)["user"];

import { createAuthClient } from "better-auth/vue";

export const authClient = createAuthClient({});

export type AuthSession = (typeof authClient.$Infer.Session)["session"];
export type AuthUser = (typeof authClient.$Infer.Session)["user"];

But with plugin i didn't found a way to do the same thing

8 Replies

kapa.ai•2mo ago

Hi @Biriyani Wayne. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To export or infer types from an object provided by a Nuxt plugin (like your authClient), you can follow a pattern similar to what you would do in a regular TypeScript file, but you need to ensure the type is accessible outside the plugin. Here’s how you can approach it: 1. Create the client in a separate file
Define and export your authClient in a separate file (e.g., lib/auth-client.ts). This allows you to both use it in your plugin and export its types for use elsewhere.

   // lib/auth-client.ts
   import { createAuthClient } from "better-auth/vue";

   export const authClient = createAuthClient({});

   export type AuthSession = (typeof authClient.$Infer.Session)["session"];
   export type AuthUser = (typeof authClient.$Infer.Session)["user"];

   // lib/auth-client.ts
   import { createAuthClient } from "better-auth/vue";

   export const authClient = createAuthClient({});

   export type AuthSession = (typeof authClient.$Infer.Session)["session"];
   export type AuthUser = (typeof authClient.$Infer.Session)["user"];

2. Use the client in your plugin
Import and provide the same instance in your plugin:

   // plugins/auth-client.ts
   import { authClient } from '~/lib/auth-client';

   export default defineNuxtPlugin(() => {
     return {
       provide: {
         authClient,
       },
     };
   });

   // plugins/auth-client.ts
   import { authClient } from '~/lib/auth-client';

   export default defineNuxtPlugin(() => {
     return {
       provide: {
         authClient,
       },
     };
   });

3. Use the exported types anywhere
Now, you can import AuthSession and AuthUser types anywhere in your app:

   import type { AuthSession, AuthUser } from '~/lib/auth-client';

   import type { AuthSession, AuthUser } from '~/lib/auth-client';

This approach is recommended in the Nuxt documentation for providing helpers and typing them, as it keeps your types and logic reusable and accessible outside the plugin context. If you want to augment the Nuxt app types for better auto-completion (e.g., for useNuxtApp().$authClient), you can also add a type declaration as shown in the docs:

// index.d.ts
declare module '#app' {
  interface NuxtApp {
    $authClient: typeof import('~/lib/auth-client').authClient
  }
}
declare module 'vue' {
  interface ComponentCustomProperties {
    $authClient: typeof import('~/lib/auth-client').authClient
  }
}

export {}

// index.d.ts
declare module '#app' {
  interface NuxtApp {
    $authClient: typeof import('~/lib/auth-client').authClient
  }
}
declare module 'vue' {
  interface ComponentCustomProperties {
    $authClient: typeof import('~/lib/auth-client').authClient
  }
}

export {}

This ensures your plugin’s provided property is typed throughout your app, and you can still export/infer types as needed from the original client instance Nuxt 3 Plugins: Typing Plugins Nuxt 4 Plugins: Typing Plugins. If you define the client only inside the plugin file, you cannot easily export its type, so separating the logic into a module is the best practice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1403983942587125780> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PranoyOP•2mo ago

@kapa.ai but what if i don't wanna create the instance in lib/auth-client.ts ?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you don't want to create the instance in a separate file (like lib/auth-client.ts), and instead want to keep the instantiation inside the Nuxt plugin, there is no direct way to export or infer types from the instance created within the plugin file itself. This is because the plugin file is not a module that exports the instance—it only provides it to the Nuxt app context. The Nuxt documentation recommends using a separate module if you need to share types or the instance itself elsewhere in your app. If you define the instance only inside the plugin, you cannot import it or its types in other files, since it's not exported from the plugin file—it's only available via the Nuxt app context (e.g., useNuxtApp().$authClient) Nuxt 4 Plugins: Typing Plugins. For advanced use-cases, you can augment the Nuxt app types (as shown in the docs), but you still need to reference the type from somewhere. Without a separately exported instance, you cannot easily infer or export types from the plugin's internal instance. Summary:
If you want to infer or export types from the instance, you need to create it in a separate module. If you keep it inside the plugin, you lose the ability to export those types for use elsewhere in your app. This limitation is reflected in the official Nuxt documentation and best practices Nuxt 4 Plugins: Typing Plugins. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1403983942587125780> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

PranoyOP•2mo ago

@kapa.ai what if i don't use authClient as a nuxt plugin insted i go with the direct instance? will it affect any bug or performance?

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- If you use the authClient as a direct instance (for example, by creating and exporting it from a module like lib/auth-client.ts and importing it wherever needed), this is a valid and recommended approach in Nuxt, especially for singleton services or clients. This pattern is commonly used for things like API clients, and it allows you to easily export types and maintain a single instance across your app. There are no known bugs or performance issues with this approach, as long as your client does not depend on the Nuxt app context or lifecycle hooks. In fact, the Nuxt documentation suggests that many utilities and composables can be used directly without the need for a plugin, which keeps your project lightweight and improves maintainability. Overusing plugins can actually cause performance issues, so using direct instances for simple services is often preferable Nuxt 3 Plugins: Best Practices Nuxt 3 Performance: Common Problems. In summary:
- Using a direct instance is recommended for singleton services that do not require access to the Nuxt app context. - This approach does not introduce bugs or performance issues and is often better for maintainability and performance. - Only use a plugin if you need to inject the instance into the Nuxt app context (e.g., for global access via useNuxtApp()). If your authClient does not need to interact with Nuxt-specific features, using a direct instance is a good choice. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@1403983942587125780> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to export types of an nuxt plugin?

Did you find this page helpful?