Vue 3 typecheck fails on `:navigation` because it doesn't recognize the type

Check that this is really a bug

• I confirm

Reproduction link

…

Bug description

<template>

<swiper
  slides-per-view="auto"
  :space-between="40"
  :navigation="{
    nextEl: `.swiper-next-${id}`,
    prevEl: `.swiper-prev-${id}`
  }"
  :modules="swiperModules"
>

</template>

This component causes the following typescript error when ran with vue-tsc

Type '{ nextEl: string; prevEl: string; }' is not assignable to type 'undefined'.

55             :navigation="{

Something must be wrong with how the :navigation type is set. Other properties are recognized with no issues.

Expected Behavior

There should not be a typescript error since the data matches the expected type, and type unknown should not be the type of the prop.

Actual Behavior

With the prop having type unknown it is impossible to match any values with it when you have a strict ts implementation.

Swiper version

8.1.4

Platform/Target and Browser Versions

Node 16

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn’t already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I’m willing to open a PR

[lucassimines]

@stijn-gravity thanks for the help! I also found another way: I created a file named shim-vue.d.ts and placed in the root directory of the project with the following code:

declare module 'swiper/vue' {
  import { DefineComponent } from 'vue';
  export const Swiper: DefineComponent;
  export const SwiperSlide: DefineComponent;
}

[iamzzm]

@stijn-gravity thanks for the help! I also found another way: I created a file named shim-vue.d.ts and placed in the root directory of the project with the following code:

declare module 'swiper/vue' {
  import { DefineComponent } from 'vue';
  export const Swiper: DefineComponent;
  export const SwiperSlide: DefineComponent;
}

Thanks! IT WORKS!