index.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'removeEventListener')

[Hodadisbirhan]

When I use swipper in my Nuxt3 project I got the error in the above How Could I fix It?

[cpreston321]

I use it for https://premier911.com and I have never got that error. Can you please submit a link to reproduction 🙏🏼

[matrixmandeep]

I got the same issue while working with nuxt swiper can you please provide the solution for this one.

[cpreston321]

@Hodadisbirhan @matrixmandeep I can't reproduce it. If you can please add a reproduction link 🙏🏼

[matrixmandeep]

I use it for https://premier911.com and I have never got that error. Can you please submit a link to reproduction 🙏🏼

here is the screenshot I attached where you can see the issue.

[Hodadisbirhan]

the Error that I got when I tried to route to the page

[thomscholtens]

This issue occurs when I navigate between a page with a layout and a page without a layout (layout: false). To resolve it, I created an empty layout (just a div with a slot) and substituted the layout: false with the empty layout, successfully resolving the problem.

[ArChiiii]

Same issue when I use definePageMeta({ layout:"xxx"}), but resolve with <NuxtLayout> in template or setting layout: false

[mostafaznv]

I got the same issue but it was something related to my api calls using useFetch.

[mrc-bsllt]

I have the same problem. It happens to me when I switch locales with switchLocalePath (nuxt-i18n) on the same page. If the swiper component is present in both locales, then there is no error, but if the swiper component is present in one locale and not in the other, then I get the error. Does anyone know how to solve it?

[mrc-bsllt]

I finally solved it by migrating from nuxt-swiper to swiper.

[vhovorun]

@mostafaznv @mrc-bsllt Guys have you managed somehow to use just swiper instead? Can you please provide the example of this?

[mostafaznv]

Hi @vhovorun Yes, after spending much time wrestling with nuxt-swiper, finally, I moved to swiper instead.

And this is one of my carousels:

<template>
    <swiper
        :space-between="spaceBetween"
        :slides-per-view="slidesPerView"
        :free-mode="freeMode"
        :loop="loop"
        :grab-cursor="grabCursor"
        :auto-height="autoHeight"
        :pagination="paginationOptions"
        :modules="[
            Pagination, FreeMode
        ]"
    >
        <swiper-slide v-for="(item, index) in items" :key="index">
            <slot :item="item" :index="index" />
        </swiper-slide>
    </swiper>
</template>

<script lang="ts" setup>
import {ref, computed} from 'vue'
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Pagination, FreeMode} from 'swiper/modules'
import type {PaginationOptions} from 'swiper/types'
import type {CarouselProps} from '~/contracts/components/ui/carousels/Carousel'

import 'swiper/css'
import 'swiper/css/pagination'


// variables
const props = withDefaults(defineProps<CarouselProps>(), {
    spaceBetween: 16,
    slidesPerView: 1.5,
    freeMode: true,
    loop: false,
    grabCursor: false,
    autoHeight: false,
    pagination: false
})

const paginationOptions = ref<PaginationOptions>({
    enabled: props.pagination,
    clickable: false
})


// computed properties
const paddingBottom = computed(() => {
    return props.pagination ? '40px' : '0'
})
</script>

<style lang="scss" scoped>
.swiper {
    padding-bottom: v-bind(paddingBottom);


    ::v-deep(.swiper-pagination) {
        bottom: 0;

        .swiper-pagination-bullet {
            width: 24px;
            height: 4px;
            border-radius: 4px;
            background: map-get($grey, 700);
            opacity: 1;
            transition: all 300ms;
        }

        .swiper-pagination-bullet-active {
            width: 72px;
            background: map-get($secondary, 'base');
        }
    }
}
</style>

Swiper Version: ^10.3.1 Easy 🎸

[cpreston321]

@vhovorun I updated the Nuxt swiper to use Swiper elements please check out the draft PR if you'd like to test to see if it works better than the current implementation that's used the swiper vue module. Within the draft PR contains docs and references on how to use.

[hizbul25]

@mostafaznv are you using https://swiperjs.com/vue instead of https://nuxt.com/modules/swiper?

[mostafaznv]

@mostafaznv are you using https://swiperjs.com/vue instead of https://nuxt.com/modules/swiper?

Yes, I'm using swiper, not its Nuxt module. npm i swiper