2

I'm using Nuxt3 with composition API

On the pages i've got swipers and videos with plyr plugin. When i open the site - everything works just great, when i move to other pages it works same way. But when i set pageTransition in nuxt config - swiper and plyr initializing only when i open the site.

I console.logged swiper instance in onMounted hook after nextTick and swiper initialization. It logged the instance but didn't init it. But when i moved from the page where it couldn't init to another one - initialization happened and the page changed.

How to init my plugins after page is ready for it? I remind - without transition in mounted hook it works fine.

That's what I do in script setup

const initSlider = async () => {
  await nextTick()

 setTimeout(()=> {
    slider.value = new Swiper(`#${id.value}`, {
      slidesPerView: 1,
      slidesPerGroup: 1,
      effect: 'fade',
      fadeEffect: {
        crossFade: true
      },

      modules: [EffectFade],

    })
  }, 400)
}

onMounted( () => {
  initSlider()
})

That's my nuxt.config

export default defineNuxtConfig({
   app: {
      pageTransition: { name: 'page', mode: 'out-in' }
   }
}

This is the css for transition

.page-enter-active,
.page-leave-active {
   transition: opacity 5s;
}

.page-enter,
.page-leave-active {
   opacity: 0;
}

UPD: i changed the transition mode in nuxt.config from 'out-in' to 'in-out'- now it works. But why...

Alexandr Kudryashov
  • 21
  • 4

1 Answers1

0

I believe the problem is incorrect initialization of plugins (Swiper in particular)

Try to use nuxt-swiper plugin instead of native Swiper package

https://github.com/cpreston321/nuxt-swiper - Swiper for nuxt 3 out of the box (nuxt-swiper)

How I connected swiper in my project:

  1. I installed the plugin in modules nuxt-swiper and added to swiper.modules those modules that I will use in the Swiper component
// nuxt.config.ts

export default defineNuxtConfig(
  {
    modules: ['nuxt-swiper'],
    swiper: {
      modules: ['navigation', 'pagination', 'autoplay', 'effect-creative'],
    }
  }
);
  1. And created the slider
<template>
  <section>
    <Swiper
      :modules="[
        SwiperNavigation,
        SwiperPagination,
        SwiperAutoplay,
        SwiperEffectCreative,
      ]"
      navigation
      :pagination="{
        dynamicBullets: true,
      }"
      :slides-per-view="slidesPerView"
      :loop="loop"
      :effect="'creative'"
      :autoplay="{
        delay,
        disableOnInteraction: true,
      }"
      :creative-effect="{
        prev: {
          shadow: false,
          translate: ['-20%', 0, -1],
        },
        next: {
          translate: ['100%', 0, 0],
        },
      }"
    >
      <SwiperSlide v-for="slide of slides" :key="`${slide.id}`">
        <div>Slide content</div>
      </SwiperSlide>
    </Swiper>
  </section>
</template>
Lev Myndra
  • 33
  • 1
  • 9
  • Thank you, now swiper works fine But it's not a solution of my problem. I've got other plugins that need to be initialized, but because of the transition it breaks. Any thoughts bout this? Do i have to always install special plugins exactly for nuxt3, or may be a solution of this? I'm a newby in ssr and don't get it fully how to work with it – Alexandr Kudryashov Dec 16 '22 at 07:55
  • Show me how you usually connect a plugin to your project, 'cause if there is no special module for nuxt 3, then the plugin is connected via nuxtApp.vueApp.use(new Plugin()) in the /plugins folder as demonstrated in the documentation - https://nuxt.com/docs/guide/directory-structure/plugins#vue-plugins Also keep in mind that if you include a plugin via nuxtApp.vueApp.use this plugin may not always be compatible with nuxt 3 – Lev Myndra Dec 16 '22 at 08:38
  • I found that if you connect a Plyr plugin, then you need to wrap it in a tag -https://stackoverflow.com/questions/72388975/nuxt3-with-vue-plyr-for-youtube-document-is-not-defined -reference-error – Lev Myndra Dec 16 '22 at 08:45