Reputation: 31
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.
Upvotes: 1
Views: 4148
Reputation: 31
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
Upvotes: 1