#How to export types of an nuxt plugin?

12 messages · Page 1 of 1 (latest)

shut bear
#

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,
    },
  };
});

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"];

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

onyx kindleBOT
#

Hi @shut bear. 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"];

  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,
    },
  };
});

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

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 {}

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](<https://nuxt.com/docs/3.x/guide/directory-structure/plugins#typing-plugins>) [Nuxt 4 Plugins: Typing Plugins](<https://nuxt.com/docs/4.x/guide/directory-structure/app/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:
----------------------
#

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

shut bear
onyx kindleBOT
#

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:

#

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

shut bear
onyx kindleBOT
#

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: