N
Nuxt•4w ago
hackal

Plugins not automatically typed

Hi, Having issues with automatically typing my plugins. Here is my plugin. 
import type { FetchOptions } from "ofetch";
import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin(() => {
  const {
    public: { baseUrl },
  } = useRuntimeConfig();
  const { $refreshCredentials } = useNuxtApp();
  const stateAccessToken = useAccessToken();

  const setupAuthHeaders = (options: FetchOptions, token: string) => {
    const headers = (options.headers ||= {});
    if (Array.isArray(headers)) {
      headers.push(["Authorization", `Bearer ${token}`]);
    } else if (headers instanceof Headers) {
      headers.set("Authorization", `Bearer ${token}`);
    } else {
      headers.Authorization = `Bearer ${token}`;
    }
  };

  const api = $fetch.create({
    retryStatusCodes: [401],
    retry: 1,
    baseURL: baseUrl,
    onRequest(context) {
      if (stateAccessToken.value) {
        setupAuthHeaders(context.options, stateAccessToken.value);
      }
    },
    async onResponseError(context) {
      if (context.response?.status !== 401) return;
      const accessToken = await $refreshCredentials();
      if (accessToken === null) return;
      setupAuthHeaders(context.options, accessToken);
    },
  });

  const operatorAPI = (baseUrl: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: baseUrl + "/api/operator",
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  const orgApi = (orgId: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: `${baseUrl}/api/org/${orgId}`,
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  return {
    provide: {
      api,
      orgApi,
      operatorAPI,
    },
  };
});
import type { FetchOptions } from "ofetch";
import { defineNuxtPlugin } from "nuxt/app";

export default defineNuxtPlugin(() => {
  const {
    public: { baseUrl },
  } = useRuntimeConfig();
  const { $refreshCredentials } = useNuxtApp();
  const stateAccessToken = useAccessToken();

  const setupAuthHeaders = (options: FetchOptions, token: string) => {
    const headers = (options.headers ||= {});
    if (Array.isArray(headers)) {
      headers.push(["Authorization", `Bearer ${token}`]);
    } else if (headers instanceof Headers) {
      headers.set("Authorization", `Bearer ${token}`);
    } else {
      headers.Authorization = `Bearer ${token}`;
    }
  };

  const api = $fetch.create({
    retryStatusCodes: [401],
    retry: 1,
    baseURL: baseUrl,
    onRequest(context) {
      if (stateAccessToken.value) {
        setupAuthHeaders(context.options, stateAccessToken.value);
      }
    },
    async onResponseError(context) {
      if (context.response?.status !== 401) return;
      const accessToken = await $refreshCredentials();
      if (accessToken === null) return;
      setupAuthHeaders(context.options, accessToken);
    },
  });

  const operatorAPI = (baseUrl: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: baseUrl + "/api/operator",
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  const orgApi = (orgId: string) => {
    return $fetch.create({
      retryStatusCodes: [401],
      retry: 1,
      baseURL: `${baseUrl}/api/org/${orgId}`,
      onRequest(context) {
        if (stateAccessToken.value) {
          setupAuthHeaders(context.options, stateAccessToken.value);
        }
      },
      async onResponseError(context) {
        if (context.response?.status !== 401) return;
        const accessToken = await $refreshCredentials();
        if (accessToken === null) return;
        setupAuthHeaders(context.options, accessToken);
      },
    });
  };

  return {
    provide: {
      api,
      orgApi,
      operatorAPI,
    },
  };
});
When I do full text search in my project folder I do not see any generated type for $api, $orgApi or $operatorAPI. Is there any other you need to help me debug this? Overall I'm having a terrible experience with TS+Nuxt+WebStorm.
5 Replies
kapa.ai
kapa.ai•4w ago
Hi @hackal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand you're having issues with automatically typing your plugins in Nuxt. This is a common challenge, especially when working with custom plugins that provide functionality through the Nuxt app instance. Type Declaration for Plugins To properly type your plugins in Nuxt, you need to declare the types for the injected properties. The issue you're experiencing is that Nuxt doesn't automatically generate type definitions for your plugin's provided properties without explicit type declarations. According to the Nuxt documentation, you need to augment the NuxtApp interface to properly type your plugins: 
// Create a types/index.d.ts file
declare module '#app' {
  interface NuxtApp {
    $api: ReturnType<typeof $fetch.create>
    $orgApi: (orgId: string) => ReturnType<typeof $fetch.create>
    $operatorAPI: (baseUrl: string) => ReturnType<typeof $fetch.create>
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $api: ReturnType<typeof $fetch.create>
    $orgApi: (orgId: string) => ReturnType<typeof $fetch.create>
    $operatorAPI: (baseUrl: string) => ReturnType<typeof $fetch.create>
  }
}

export {}
// Create a types/index.d.ts file
declare module '#app' {
  interface NuxtApp {
    $api: ReturnType<typeof $fetch.create>
    $orgApi: (orgId: string) => ReturnType<typeof $fetch.create>
    $operatorAPI: (baseUrl: string) => ReturnType<typeof $fetch.create>
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $api: ReturnType<typeof $fetch.create>
    $orgApi: (orgId: string) => ReturnType<typeof $fetch.create>
    $operatorAPI: (baseUrl: string) => ReturnType<typeof $fetch.create>
  }
}

export {}
This approach is documented in the Nuxt plugins documentation, which explains that you need to manually declare the types of injected properties. WebStorm-specific Issue It's worth noting that there might be a specific issue with WebStorm. According to a Stack Overflow post, there's a known bug in JetBrains IDEs (including WebStorm) where custom global properties added by augmenting Vue are not properly resolved: Custom plugin in nuxt 3 has unknown type The same code might work correctly in VSCode but show type errors in WebStorm due to this bug. Global Type Declarations If you want to make your types available globally without explicit imports, you can add them to the global namespace: 
// types/my-types.d.ts
declare global {
  // Your global types here
}

// tell TypeScript that this file is a module
export {}
// types/my-types.d.ts
declare global {
  // Your global types here
}

// tell TypeScript that this file is a module
export {}
This approach is mentioned in a Stack Overflow post about automatically recognizing type definitions. Next Steps 1. Create the type declaration file as shown above 2. Run nuxi prepare to regenerate type definitions 3. Restart your IDE's TypeScript server If you're still experiencing issues, it might be related to the WebStorm bug mentioned earlier. In that case, you might want to try VSCode as an alternative until the bug is fixed. Let me know if this helps or if you need further assistance with your Nuxt + TypeScript setup! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@77852149421191168> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
hackal
hackalOP•4w ago
As mentioned in docs and in the bot response I am running Webstorm 2025.1 EAP. Where the webstorm specific issue is solved. However I still do not see any types generated (I don't think the type generation is webstorm issue per se)
hackal
hackalOP•4w ago
What is VSCode doing differently from WebStorm? I can see that $api is nicely typed there
No description
hackal
hackalOP•4w ago
Here is webstorm
No description

Did you find this page helpful?