.A functionality focused Vue slide carousel created for SSR/SSG settings. No JS is utilized to style the carousel or even it's slides. The target is actually to boost LCP and CLS credit ratings considering that there is actually no style or even profit improvements when JS hydates. It's largely made for leaving "memory card" design slides (like for linking to write-ups or even items) where the carousel-ness is actually conditionally used based on the number of memory cards that are slotted in in addition to the viewport width.Have a look at the demonstration: https://vue-ssr-carousel.netlify.app.Install.yarn add vue-ssr-carousel.Default.import SsrCarousel coming 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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, observe the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced along with v-for, use crucial values that are actually based on the data you are actually knotting with. In short, do v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, index in slides": key=' index'.Don't use v-if on the root aspect of slide components.API.Props.Ports.Slots.Description.nonpayment.Where your slides obtain administered.back-arrow.Switch out the default back icon. Slot props:.disabled - Real if at first web page when not looping.next-arrow.Substitute the default upcoming image. Slot props:.impaired - Accurate if finally page when not looping.dot.Switch out the nonpayment pagination dots. Port props:.index - The web page mark that the dot stands for.disabled - Accurate if dot exemplifies existing webpage.Methods.Strategies.Summary.upcoming().Go forward a web page or even slide, depending upon the paginate-by-slide set.back().Return a webpage or slide, depending upon the paginate-by-slide prop.goto( index).Visit a mark. If paginate-by-slide is false, this relates to a webpage balanced out. If correct, this translates to a slide offset.Activities.View https://vue-ssr-carousel.netlify.app/events.Occasions.Summary.modification( index ).Shot when the inner index counter adjustments.input.Like adjustment yet meant for use with v-model.press.Shot on mouse or even touch down.release.Fired on mouse or touch up.nuisance: start.Shot on begin of tugging.drag: end.Fired on end of tugging.tween: start( mark ).Fired when the slide carousel begins tweening to it is actually last position.tween: end( index ).Terminated when the slide carousel has actually completed tweening to it is actually destination.