Incorrect type definition causing issues with Volar

[nielsvanvelzen]

Describe the bug

The TypeScript type definitions for Vue 3 are incorrect. This causes issues with Volar (the official Vue extension for Visual Studio Code) and vue-tsc (Vue typechecker, part of Volar).

This issue started with the 1.0 release of Volar. A fix is already available in pull request #355.

Reproducible test case

Open any Vue 3 project in Visual Studio code with Volar installed. It will show a red line for all <font-awesome-icon /> usages.

Expected behavior

I expect correct types so Volar will not show a red line on usages of the <font-awesome-icon /> component.

Additional context

Volar issue: https://github.com/johnsoncodehk/volar/issues/1975 Open pull request: https://github.com/FortAwesome/vue-fontawesome/pull/355

[dalirnet]

An interim solution:

1. Add fontawesome.d.ts

   
   import "@vue/runtime-core";
   import { DefineComponent } from "vue";
   import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
   import { FontAwesomeIconProps, FontAwesomeLayersProps, FontAwesomeLayersTextProps } from "@fortawesome/vue-fontawesome";

export {};

declare module "@vue/runtime-core" { export interface GlobalComponents { FontAwesomeIcon: DefineComponent< Partial & { icon: object | Array | string | IconDefinition; }

; FontAwesomeLayers: DefineComponent<Partial>; FontAwesomeLayersText: DefineComponent<Partial>; } }

2. Update tsconfig.json

   {
   ...
   
   "include": ["fontawesome.d.ts"]
   
   ...
   }

[jasonlundien]

Closing this issue as it has been fixed based upon merged PR #355.

[last-partizan]

Is this PR supposed to fix issue only for vue 3, or vue 2.7 should work too?

I'm getting errors with vue-tsc 1.1.7, but with 1.1.4 it works fine.