.A functionality concentrated Vue slide carousel developed for SSR/SSG atmospheres. No JS is actually used to layout the slide carousel or it is actually slides. The goal is to enhance LCP and CLS ratings given that there is actually no format or even markup improvements when JS hydates. It's mostly developed for providing "memory card" style slides (like for connecting to articles or items) where the carousel-ness is conditionally used based upon the number of memory cards that are actually slotted in and also the viewport distance.Have a look at the demo: https://vue-ssr-carousel.netlify.app.Put in.yarn incorporate vue-ssr-carousel.Default.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 nonpayment buildModules: [' vue-ssr-carousel/nuxt']Use.Slide 1.Slide 2.Slide 3.For more instances, observe the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created with v-for, utilize vital values that are based on the data you are knotting via. To put it simply, perform v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, mark in slides": key=' mark'.Do not make use of v-if on the origin element of slide components.API.Props.Ports.Slots.Explanation.default.Where your slides receive administered.back-arrow.Replace the default back symbol. Port props:.handicapped - Accurate if at first webpage when certainly not knotting.next-arrow.Replace the nonpayment next icon. Slot props:.impaired - Correct if finally web page when certainly not looping.dot.Switch out the nonpayment pagination dots. Port props:.index - The page index that the dot represents.handicapped - Correct if dot represents present webpage.Methods.Methods.Description.following().Go ahead a web page or even slide, depending on the paginate-by-slide set.back().Get back a web page or slide, depending upon the paginate-by-slide prop.goto( mark).Most likely to a mark. If paginate-by-slide is untrue, this translates to a webpage offset. If real, this equates to a slide made up for.Occasions.See https://vue-ssr-carousel.netlify.app/events.Occasions.Explanation.change( index ).Terminated when the interior mark counter improvements.input.Like change but aimed for use along with v-model.press.Fired on mouse or even contact down.release.Shot on mouse or retouch.drag: begin.Fired on beginning of yanking.nuisance: end.Shot on end of tugging.tween: start( index ).Fired when the carousel starts tweening to it's final placement.tween: edge( mark ).Terminated when the carousel has finished tweening to it's place.