Nuxt Js - Script loaded just once during initial page load

Question

I have a static website designed already and I am converting to Nuxt js as the website needs to be interactive. After I run my Nuxt server "npm run build...npm run start" the scripts are loaded and my carousel/slides works fine. When I navigate using nuxt-link to the next page, slides/carousel doesn't work again. I think the issue is that my scripts are only loaded initially when loaded from the server.

in my nuxt.config.js file, I have included the js in head tag following the api docs both globally and in my component but its the same

head: {
    script: [
        /* external javascripts */
        { src: 'js/jquery.min.js', body: true, async: true, defer: true },
        { src: 'js/bootstrap.min.js', body: true, async: true, defer: true },
        { src: 'js/wow.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.backTop.min.js', body: true, defer: true },
        { src: 'js/waypoints.min.js', body: true, async: true, defer: true },
        { src: 'js/waypoints-sticky.min.js', body: true, async: true, defer: true },
        { src: 'js/owl.carousel.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.stellar.min.js', body: true, async: true, defer: true },
        { src: 'js/jquery.counterup.min.js', body: true, async: true, defer: true },
        { src: 'js/venobox.min.js', body: true, async: true, defer: true },
        { src: 'js/custom-scripts.js', body: true, async: true, defer: true }
      ],
}

going through some resource online, I have added async: true and defer: true, but it all seem to be the same

the images below are screenshots of how the testimonial carousel looks at page load and after nuxt-link navigation

Please any suggestion on how to fix this? Thanks a lot

PS: When I reload the page entirely by reloading the tab, the slides works perfectly.

score 1 · Accepted Answer · answered Jun 03 '20 at 16:28

I eventually used vue carousel to fix the slides. npm install vue-carousel
Then I created a vue-carousel.js file in my plugins folder

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

Vue.use(VueCarousel);

In my nuxt.config.js file, I imported my plugin

plugins: [
    { src: '~/plugins/vue-carousel.js', ssr: false },
  ]

finally in my .vue file

<carousel :per-page-custom="[[200, 1], [768, 2]]">
    <slide>
      Slide 1 Content
    </slide>
    <slide>
      Slide 2 Content
    </slide>
  </carousel>

replacing the content of the slides, my final output

Nuxt Js - Script loaded just once during initial page load

1 Answers1