.A performance concentrated Vue slide carousel made for SSR/SSG settings. No JS is made use of to design the slide carousel or it's slides. The target is actually to strengthen LCP as well as CLS ratings given that there is actually no format or markup modifications when JS hydates. It is actually predominantly designed for providing "memory card" style slides (like for connecting to posts or even products) where the carousel-ness is actually conditionally administered based on the amount of memory cards that are actually slotted in as well as the viewport size.Take a look at the demo: https://vue-ssr-carousel.netlify.app.Mount.yarn add vue-ssr-carousel.Default.bring in SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment buildModules: [' vue-ssr-carousel/nuxt']Consumption.Slide 1.Slide 2.Slide 3.For more examples, view the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced along with v-for, use key worths that are actually based on the information you are knotting with. In other words, perform v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, mark in slides": trick=' mark'.Do not use v-if on the origin component of slide parts.API.Props.Ports.Ports.Description.nonpayment.Where your slides get injected.back-arrow.Replace the default back image. Port props:.impaired - Real if in the beginning webpage when certainly not looping.next-arrow.Switch out the nonpayment next image. Port props:.impaired - Correct if finally webpage when certainly not knotting.dot.Replace the default pagination dots. Slot props:.index - The webpage index that the dot embodies.disabled - Accurate if dot represents existing webpage.Methods.Procedures.Explanation.next().Go ahead a web page or slide, depending on the paginate-by-slide set.back().Return a page or even slide, depending upon the paginate-by-slide prop.goto( mark).Visit a mark. If paginate-by-slide is actually incorrect, this corresponds to a webpage offset. If accurate, this translates to a slide offset.Activities.Observe https://vue-ssr-carousel.netlify.app/events.Activities.Summary.adjustment( mark ).Shot when the inner index counter adjustments.input.Like adjustment however planned for make use of along with v-model.press.Fired on mouse or even touch down.release.Fired on computer mouse or patch up.burden: begin.Fired on beginning of moving.burden: end.Shot on end of moving.tween: start( index ).Fired when the slide carousel begins tweening to it is actually ultimate posture.tween: edge( index ).Discharged when the slide carousel has finished tweening to it is actually location.