Correct shims for @nuxtjs/composition-api and @nuxt/typescript

[soerenmartius]

Hi,

when using this module with the @nuxtjs/composition-api package, I am running into an overload error.

As an example:

<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
import IconShieldCheck from 'heroicons/outline/shield-check.svg?inline'

export default defineComponent({
  components: {
    IconShieldCheck,
  },
.....
})
</script>

No overload matches this call.

  Overload 3 of 3, '(options: ComponentOptionsWithProps<ComponentPropsOptions<Data>, Data, Data, {}, {}, ({ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; ... 29 more ...; flat?: unknown[] | undefined; }) | ({} & { ...; })>): VueProxy<...>', gave the following error.
    Type 'string' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<...>> | AsyncComponentPromise<...> | AsyncComponentFactory<...>'.

If I update my shims file to

import { Component } from 'vue'
declare module '*.svg' {
  const content: Component | string
  export default content
}

declare module '*.svg?inline' {
  const content: Component | string
  export default content
}

declare module '*.svg?raw' {
  const content: Component | string
  export default content
}

declare module '*.svg?data' {
  const content: Component | string
  export default content
}

The code compiles but still my IDE (VSCode) can't resolve the svg import statements.

How did you guys set up this module correctly with typescript and the composition API package?

[kaiasuncion]

Try this, It worked for me

declare module '*.svg?inline' {
  const content: any
  export default content
}