vue-fontawesome icon indicating copy to clipboard operation
vue-fontawesome copied to clipboard

Typescript error in Nuxt 3 integration

Open cmitjans-at-wiris opened this issue 3 years ago • 1 comments

Describe the bug Followed the steps on how to integrate FontAwesome with Nuxt 3.

It seems the steps are not correct. I get an error when adding FontAwesomeIcon to vueApp. image

When removing the last parameter (as you would do when integrating FontAwesome with Vue 3 directly - no Nuxt) the following error shows:

image

View Problem
Argument of type 'ComponentPublicInstance<FontAwesomeIconProps, {}, {}, {}, {}, {}, FontAwesomeIconProps, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to parameter of type 'Component<any, any, any, ComputedOptions, MethodOptions>'.
  Type 'ComponentPublicInstance<FontAwesomeIconProps, {}, {}, {}, {}, {}, FontAwesomeIconProps, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to type 'ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any>'.
    Type 'ComponentPublicInstance<FontAwesomeIconProps, {}, {}, {}, {}, {}, FontAwesomeIconProps, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>' is not assignable to type 'ComponentOptionsBase<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}>'.
      Types of property 'computed' are incompatible.
        Type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): WritableComputedRef<...>; }' is not assignable to type 'ComputedOptions'.
          Index signature for type 'string' is missing in type '{ <T>(getter: ComputedGetter<T>, debugOptions?: DebuggerOptions): ComputedRef<T>; <T>(options: WritableComputedOptions<T>, debugOptions?: DebuggerOptions): WritableComputedRef<...>; }'.ts(2345)

Expected behavior There should be no typescript errors.

Additional context Dependencies I'm using:

  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "^3.0.1"
  }

cmitjans-at-wiris avatar Sep 19 '22 18:09 cmitjans-at-wiris

Thanks @cmitjans-at-wiris we'll take a look when we can.

robmadole avatar Sep 20 '22 19:09 robmadole

Any update on this?

jonatandorozco avatar Oct 21 '22 18:10 jonatandorozco

This looks like it's happened before and the workaround here worked for me: #295

technatelogy avatar Nov 04 '22 21:11 technatelogy

This seems to be fixed now (the two args solution at least works for me)

tobiasdiez avatar Nov 21 '22 15:11 tobiasdiez

@cmitjans-at-wiris

Are you still getting the error using the 3 args ?

 nuxtApp.vueApp.component("font-awesome-icon", FontAwesomeIcon, {})

I am not seeing the error in the console ?

And if you do not mind sharing... are you using the "Error Lens" to view the inline errors in VS Code or using something else (I am not seeing any inline errors via Error Lens either)?

jasonlundien avatar Mar 09 '23 20:03 jasonlundien

@cmitjans-at-wiris ---

Going to go ahead and close this issue. If you provide a reproducible repo we can re-open.

jasonlundien avatar Apr 17 '23 19:04 jasonlundien