Swiper Vue component event handlers not working in Nuxt

Swiper Vue component event handlers not working in Nuxt

Problem Description:

I am using Swiper.js in my Nuxt project. I am using the default code the docs provided. I am trying to log the swiper instance but it’s not working.
In the console, it gives me the following error

Here is my template code and onSwiper function

<template>
    <h1>Slider</h1>
    <div class="container">

        <swiper @swiper="onSwiper" :navigation="true" :slides-per-view="3" :space-between="89" :loop="true"
            :loopFillGroupWithBlank="true">
            <swiper-slide v-for="image in images" :key="image">
                <card :image="image" />
            </swiper-slide>

        </swiper>
        <button @click="slideTo(4)" class="bg-primary btn-primary"> Next Slide</button>

    </div>
</template>

<script>
import {
    Swiper,
    SwiperSlide,
    useSwiper
} from 'swiper/vue';
import SwiperCore, {
    Navigation
} from 'swiper';
import 'swiper/css';
import "swiper/css/navigation";

SwiperCore.use([Navigation]);

export default {
    name: "Slider",
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        const onSwiper = (swiper) => {
            console.log(swiper);
        };
    },
    data() {
        return {
            images: [
                "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg",
                "https://cdn.pixabay.com/photo/2016/02/17/23/03/usa-1206240_1280.jpg",
                "https://cdn.pixabay.com/photo/2022/02/09/03/48/oriental-garden-lizard-7002565_960_720.jpg",
                "https://cdn.pixabay.com/photo/2016/12/04/19/30/berlin-cathedral-1882397_1280.jpg",
                "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg"
            ],
            

        };
    },
   

};
</script>

Package.json

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.13",
    "nuxt": "3.0.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "@nuxtjs/google-fonts": "^2.0.0",
    "@pinia/nuxt": "^0.4.6",
    "@tailwindcss/typography": "^0.5.8",
    "swiper": "^8.4.5"
  }
}

Nuxt Config

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  modules: ["@pinia/nuxt"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

Solution – 1

You need to return it at the end as shown in their example.

setup() {
  const onSwiper = (swiper) => {
    console.log(swiper);
  }

  return {
    onSwiper
  }
}

Only script setup automatically returns the functions/variables.