Customizing Swiper in Vue 3

Question

I have a simple, functional swiper working in Vue 3 with Swiper.js 8.4.5 working off these Vue examples (sans scrollbar and A11y). As shown, everything appears to be working as intended.

    <TileFormat>
      <div style="width: 100%; height: 100%; display: flex">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
        </swiper>
      </div>
    </TileFormat>

    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar],
      };
    },

I would like to modify elements of the Navigation param (size, color, etc.) but have been unable to find a way to accomplish that. I have done this mostly with attempts to modify the css within the scoped style block of the view (which are ignored or overwritten). I've even tried skipping import 'swiper/css/navigation'; and rolling my own, but that doesn't work either. The examples of similar changes I can find seem to apply to versions of Swiper.js that aren't written for Vue 3.

The Swiper.js docs say:

Note, Swiper Vue.js component will create required elements for Navigation, Pagination and Scrollbar if you pass these params without specifying its elements (e.g. without navigation.nextEl, pagination.el, etc.)

I have come to the quasi-conclusion that I need to add my changes to the Navigation module within the setup() method before passing it; however, I can't seem to locate an example of how to do that.

What is the "most robust" way to modify Swiper components in Vue 3?

EDIT 1: By the way, this approach was also unsuccessful:

:navigation="{enabled: true, prevEl: '.myPrev', nextEl: '.myNext'}"

Answer 1

I have shared a workaround to do it in here https://stackoverflow.com/a/78762651/11431251 this is applicable for Vue2 and Vue3

Answer 2

Usually, to be able to customize any kind of UI components (it being something like Bootstrap or a UI package), you use:

• an increased specificity, hence why the ID is working in your case
• an element as deep as you can, if you want to go further you can use :deep
• the usage of !important may be overkill but that one is a good case to override such projects

Answer 3

Using an id instead of a class allowed me to customize the slider object (it still needs a lot of work). There may also be a specific class reference that will work, but the options I tried were ignored (or overwritten).

    <TileFormat>
      <div style="width: 100%; height: 100%; display: flex;">
        <swiper
          :modules="modules"
          :slides-per-view="1"
          :space-between="50"
          navigation
          :pagination="{ clickable: true }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          id="mySlider"
        >
          <swiper-slide>Slide 1</swiper-slide>
          <swiper-slide>Slide 2</swiper-slide>
          <swiper-slide>Slide 3</swiper-slide>
        </swiper>
      </div>
    </TileFormat>

#mySlider .swiper-button-prev,
#mySlider .swiper-button-next {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #888888;
  --swiper-navigation-size: 20px;
}