.An efficiency centered Vue slide carousel designed for SSR/SSG environments. No JS is actually utilized to style the slide carousel or even it is actually slides. The objective is to improve LCP and also CLS credit ratings considering that there is actually no layout or even markup adjustments when JS hydates. It's predominantly made for leaving "memory card" type slides (like for connecting to articles or products) where the carousel-ness is actually conditionally administered based on the lot of cards that are slotted in in addition to the viewport distance.Take a look at the demonstration: https://vue-ssr-carousel.netlify.app.Install.yarn add vue-ssr-carousel.Nonpayment.import SsrCarousel coming from 'vue-ssr-carousel'.import ssrCarouselCss coming from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Use.Slide 1.Slide 2.Slide 3.For more instances, view the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated along with v-for, utilize crucial market values that are based on the records you are looping with. In short, do v-for=" slide in slides": key=' slide.id' rather that v-for=" slide, mark in slides": key=' index'.Don't make use of v-if on the origin factor of slide elements.API.Props.Ports.Slots.Summary.nonpayment.Where your slides acquire administered.back-arrow.Change the nonpayment back image. Slot props:.handicapped - Accurate if at first webpage when certainly not looping.next-arrow.Change the default upcoming icon. Port props:.disabled - Accurate if at last web page when certainly not looping.dot.Substitute the default pagination dots. Port props:.index - The webpage index that the dot represents.impaired - True if dot embodies present page.Procedures.Strategies.Description.following().Move forward a web page or slide, depending upon the paginate-by-slide uphold.back().Go back a web page or even slide, depending on the paginate-by-slide set.goto( mark).Most likely to an index. If paginate-by-slide is false, this translates to a web page balanced out. If true, this equates to a slide countered.Celebrations.View https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.improvement( index ).Terminated when the inner mark counter improvements.input.Like change however meant for usage with v-model.press.Fired on mouse or touch down.launch.Shot on mouse or retouch.burden: begin.Fired on begin of dragging.nuisance: end.Shot on end of yanking.tween: start( mark ).Fired when the slide carousel begins tweening to it is actually final placement.tween: end( index ).Terminated when the slide carousel has actually completed tweening to it's destination.