Swiper components for Vue 3 (with TS support and setup function)

[forchel]

Hello,
I'm stuck with my problem of creating a Swiper component with a thumb swiper in Vue 3 where the Swiper slides are in a different Vue component (this is basically due to a CMS related environment). Without the extra thumb swiper I was able to provide/inject the Swiper-reference (which is needed for each SwiperSlide) for each slide. But I need to know if the injected component reference belongs to the main Swiper or to the thumb swiper.
Do you have any ideas?
Any constructive idea is welcome.

The CarouselWidget.vue:

<template>
  <div class="swiper-container-wrapper">
    <Swiper
      ref="swiperContainer"
      :breakpoints="responsiveBreakpoints"
      :slides-per-view="1"
      :space-between="32"
      :zoom="{ maxRatio: 2 }"
      :loop="false"
      :grab-cursor="true"
      :navigation="mainNavigation"
      :pagination="pagination"
      :preload-images="true"
      :update-on-images-ready="true"
      :lazy="false"
      :thumbs="{ swiper: thumbsSwiper }"
      :modules="modules"
      :observer="!areWeTestingWithJest()"
      :observe-parents="!areWeTestingWithJest()"
      @swiper="onSwiper"
    >
      <slot />
    </Swiper>
    <div
      class="swiper-container-thumbnail-wrapper"
    >
      <div class="swiper-container-thumbnail-inner-wrapper">
        <div v-if="widget.navigationEnabled" ref="thumbsPrev" class="swiper-button-prev">
          <font-awesome-icon icon="angle-down" rotation="180" />
        </div>
        <Swiper
          ref="swiperThumbsContainer"
          :breakpoints="thumbsResponsiveBreakpoints"
          :center-insufficient-slides="true"
          :free-mode="true"
          :watch-slides-progress="true"
          :preload-images="true"
          :lazy="false"
          :navigation="thumbNavigation"
          :modules="thumbModules"
          :direction="direction"
          :observer="!areWeTestingWithJest()"
          :observe-parents="!areWeTestingWithJest()"
          class="gallery-thumbs"
          @swiper="setThumbsSwiper"
        >
          <slot />
        </Swiper>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, provide, ref, Ref, toRefs } from 'vue';
// eslint-disable-next-line import/no-named-as-default
import { FreeMode, Lazy, Navigation, Pagination, SwiperOptions, Thumbs, Zoom } from 'swiper';
import { NavigationOptions, PaginationOptions, Swiper as SwiperClass, SwiperModule } from 'swiper/types';
import { Swiper } from 'swiper/vue';
import consola from 'consola';

import { CarouselCMSContainerView } from '@/api/model/CarouselCMSContainerView';
import { LazyLoadKey, SwiperKey } from '@/injectionKeys';

const props = defineProps<{
  widget: CarouselCMSContainerView
  itemCount: number
}>();

const { widget } = toRefs(props);

provide(LazyLoadKey, ref(widget.value.pagingEnabled));

const swiperContainer: Ref<HTMLElement | undefined> = ref();
const swiperThumbsContainer: Ref<HTMLElement | undefined> = ref();

const mainPrev: Ref<HTMLElement | undefined> = ref();
const mainNext: Ref<HTMLElement | undefined> = ref();
const thumbsPrev: Ref<HTMLElement | undefined> = ref();
const thumbsNext: Ref<HTMLElement | undefined> = ref();
const swiperPagination: Ref<HTMLElement | undefined> = ref();

const thumbModules: SwiperModule[] = [Navigation, Lazy, FreeMode];
const modules: SwiperModule[] = [Navigation, Pagination, Lazy, Thumbs, Zoom];

const thumbNavigation: NavigationOptions = widget.value.navigationEnabled ? {
  nextEl: thumbsNext.value,
  prevEl: thumbsPrev.value,
} : {};

const mainNavigation: NavigationOptions = widget.value.navigationEnabled ? {
  nextEl: mainNext.value,
  prevEl: mainPrev.value,
} : {};

const pagination: PaginationOptions = widget.value.pagingEnabled ? {
  el: swiperPagination.value,
  type: 'progressbar',
  clickable: true,
} : {};

const direction = computed(() => {
  return widget.value.orientationHorizontal ? 'horizontal' : 'vertical';
});

const thumbsSwiper: Ref<SwiperClass | undefined> = ref();

const setThumbsSwiper = (swiper: SwiperClass) => {
  consola.withTag('CarouselWidget').log('thumb swiper initialized ');
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
  thumbsSwiper.value = swiper;
};

const onSwiper = (swiper: SwiperClass) => {
  consola.withTag('CarouselWidget').log('swiper initialized');
  provide(SwiperKey, ref(swiper));
};

interface ResponsiveOptions {
  [width: number]: SwiperOptions;
  [ratio: string]: SwiperOptions;
}

const thumbsResponsiveBreakpoints = computed((): ResponsiveOptions => {
  return {
    576: {slidesPerView: 0, spaceBetween: 0},
    840: {slidesPerView: 0, spaceBetween: 0},
    1080: {slidesPerView: 4, spaceBetween: 0},
    1300: {slidesPerView: 5, spaceBetween: 0},
    1600: {slidesPerView: 5, spaceBetween: 0, slidesOffsetBefore: 12}
  };
});

const responsiveBreakpoints = computed((): ResponsiveOptions => {
  return {
    576: {},
    840: {},
    1080: {},
    1300: {},
    1600: {}
  };
});

</script>

The CarouselItem.vue:

<template>
  <SwiperSlide
    :swiper-ref="swiper"
    :zoom="component.zoomEnabled"
  >
    <CMSComponent :component="component.component" />
  </SwiperSlide>
</template>

<script setup lang="ts">
import { SwiperSlide } from 'swiper/vue';

import { CarouselCMSContainerItem } from '@/api/model/CarouselCMSContainerItem';
import CMSComponent from '@/components/CMSComponent.vue';
import { injectStrict, SwiperKey } from '@/injectionKeys';

defineProps<{
  component: CarouselCMSContainerItem;
}>();

const swiper = injectStrict(SwiperKey);
</script>

[forchel]

Hello again,
I would like to know, whether it is even possible to use the SwiperSlide component in the described above instead of adding the child items directly like:

<swiper>
  <swiper-slide>1</swiper-slide>
  <swiper-slide>2</swiper-slide>
  <swiper-slide>3</swiper-slide>
</swiper>

as described:

<swiper>
  <slot />
</swiper>

I've noticed, that after rendering the Swiper, all of the content is outside the wrapper-container 'swiper-wrapper' and therefore the Swiper doesn't work. In the meantime I've noticed also, that with the latest version I could use useSwiper and useSwiperSlide instead of define my own provide/inject key for accessing the Swiper-Ref.
Any hints and suggestions are still welcome.

PS: I think it should be possible to provide a different DOM node as wrapper-container (as Swiper option) to solve my problem. Instead I can only change the wrapper css class name. But this doesn't work for me. What do you think?