.An efficiency concentrated Vue carousel designed for SSR/SSG atmospheres. No JS is actually made use of to style the carousel or even it's slides. The objective is to strengthen LCP as well as CLS credit ratings due to the fact that there is actually no style or markup changes when JS hydates. It is actually mainly developed for providing "memory card" type slides (like for connecting to articles or even items) where the carousel-ness is actually conditionally used based upon the number of cards that are actually slotted in in addition to the viewport width.Have a look at the trial: https://vue-ssr-carousel.netlify.app.Put up.yarn add vue-ssr-carousel.Nonpayment.import SsrCarousel coming from 'vue-ssr-carousel'.bring in ssrCarouselCss coming from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For even more instances, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced along with v-for, use vital market values that are actually based upon the data you are actually knotting through. In other words, do v-for=" slide in slides": key=' slide.id' rather that v-for=" slide, mark in slides": trick=' mark'.Don't use v-if on the origin component of slide parts.API.Props.Slots.Ports.Explanation.nonpayment.Where your slides get infused.back-arrow.Replace the default back icon. Slot props:.handicapped - True if initially web page when certainly not knotting.next-arrow.Substitute the nonpayment upcoming image. Slot props:.disabled - True if at last web page when not looping.dot.Replace the nonpayment pagination dots. Port props:.mark - The web page mark that the dot works with.impaired - Correct if dot embodies existing page.Approaches.Methods.Description.following().Go forward a web page or even slide, depending upon the paginate-by-slide uphold.back().Get back a webpage or even slide, depending upon the paginate-by-slide uphold.goto( index).Go to a mark. If paginate-by-slide is false, this translates to a webpage made up for. If correct, this corresponds to a slide offset.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Events.Explanation.modification( index ).Axed when the inner index counter changes.input.Same as improvement however aimed for usage with v-model.press.Fired on mouse or even contact down.release.Fired on computer mouse or even patch up.bother: begin.Shot on beginning of tugging.drag: end.Shot on end of moving.tween: begin( index ).Fired when the carousel starts tweening to it's ultimate posture.tween: edge( index ).Axed when the slide carousel has completed tweening to it's destination.