.A functionality concentrated Vue carousel designed for SSR/SSG atmospheres. No JS is used to style the slide carousel or it is actually slides. The goal is actually to boost LCP and also CLS ratings given that there is no style or markup adjustments when JS hydates. It is actually largely developed for rendering "memory card" design slides (like for connecting to write-ups or products) where the carousel-ness is conditionally applied based upon the number of memory cards that are slotted in along with the viewport width.Take a look at the trial: https://vue-ssr-carousel.netlify.app.Set up.yarn add vue-ssr-carousel.Nonpayment.import SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss coming 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 more examples, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced with v-for, use crucial market values that are based upon the information you are actually looping with. Simply put, do v-for=" slide in slides": key=' slide.id' instead that v-for=" slide, index in slides": trick=' index'.Don't utilize v-if on the root aspect of slide elements.API.Props.Slots.Ports.Summary.default.Where your slides acquire injected.back-arrow.Switch out the nonpayment back image. Slot props:.handicapped - Accurate if at first webpage when certainly not knotting.next-arrow.Switch out the nonpayment next image. Slot props:.handicapped - Accurate if at last page when certainly not knotting.dot.Replace the default pagination dots. Slot props:.mark - The web page mark that the dot exemplifies.handicapped - Correct if dot represents current page.Techniques.Approaches.Description.following().Go ahead a web page or slide, relying on the paginate-by-slide set.back().Get back a webpage or slide, depending upon the paginate-by-slide uphold.goto( index).Go to a mark. If paginate-by-slide is actually inaccurate, this relates to a web page made up for. If real, this corresponds to a slide offset.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Celebrations.Description.improvement( mark ).Discharged when the internal index counter improvements.input.Same as modification yet aimed for usage along with v-model.push.Fired on computer mouse or even contact down.release.Shot on mouse or patch up.burden: beginning.Fired on start of dragging.bother: end.Shot on end of dragging.tween: start( mark ).Fired when the slide carousel starts tweening to it is actually final posture.tween: edge( mark ).Axed when the carousel has ended up tweening to it's location.