.A performance focused Vue carousel made for SSR/SSG atmospheres. No JS is actually made use of to design the carousel or even it is actually slides. The objective is actually to boost LCP and also CLS scores since there is actually no style or profit changes when JS hydates. It's mainly made for providing "card" style slides (like for connecting to write-ups or items) where the carousel-ness is conditionally administered based on the variety of cards that are actually slotted in along with the viewport distance.Take a look at the demonstration: https://vue-ssr-carousel.netlify.app.Put up.anecdote include vue-ssr-carousel.Nonpayment.import SsrCarousel from 'vue-ssr-carousel'.bring in ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For additional instances, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced along with v-for, use essential market values that are actually based upon the data you are knotting by means of. In short, carry out v-for=" slide in slides": secret=' slide.id' somewhat that v-for=" slide, mark in slides": trick=' index'.Do not use v-if on the origin element of slide parts.API.Props.Ports.Slots.Explanation.nonpayment.Where your slides obtain infused.back-arrow.Replace the nonpayment back icon. Port props:.disabled - Accurate if in the beginning page when certainly not knotting.next-arrow.Switch out the nonpayment next icon. Slot props:.disabled - Real if at last page when not knotting.dot.Substitute the nonpayment pagination dots. Port props:.index - The webpage index that the dot works with.handicapped - Correct if dot works with existing webpage.Techniques.Procedures.Explanation.following().Go forward a web page or slide, relying on the paginate-by-slide set.back().Return a page or slide, depending on the paginate-by-slide prop.goto( mark).Most likely to an index. If paginate-by-slide is actually untrue, this equates to a webpage countered. If accurate, this translates to a slide offset.Events.Find https://vue-ssr-carousel.netlify.app/events.Occasions.Description.modification( index ).Shot when the interior mark counter adjustments.input.Same as modification however wanted for usage along with v-model.press.Shot on computer mouse or touch down.launch.Fired on mouse or even touch up.pain: begin.Shot on beginning of pulling.burden: end.Shot on end of moving.tween: begin( index ).Discharged when the slide carousel begins tweening to it's ultimate setting.tween: end( index ).Shot when the slide carousel has completed tweening to it is actually destination.