.An efficiency centered Vue carousel made for SSR/SSG atmospheres. No JS is utilized to layout the carousel or it's slides. The goal is to boost LCP as well as CLS ratings since there is actually no layout or even markup modifications when JS hydates. It's primarily designed for leaving "card" type slides (like for linking to short articles or products) where the carousel-ness is conditionally applied based on the lot of cards that are actually slotted in as well as the viewport distance.Take a look at the demonstration: https://vue-ssr-carousel.netlify.app.Put in.yarn include 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 default buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For even more instances, find the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced with v-for, use crucial market values that are actually based upon the data you are actually looping through. To put it simply, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, index in slides": key=' mark'.Don't make use of v-if on the origin aspect of slide parts.API.Props.Ports.Slots.Summary.nonpayment.Where your slides obtain injected.back-arrow.Change the default back icon. Slot props:.disabled - True if initially page when certainly not knotting.next-arrow.Switch out the default next icon. Slot props:.disabled - Correct if at last web page when not looping.dot.Substitute the nonpayment pagination dots. Slot props:.mark - The page mark that the dot represents.handicapped - True if dot represents existing page.Approaches.Techniques.Summary.upcoming().Go ahead a web page or slide, depending on the paginate-by-slide set.back().Return a webpage or slide, depending upon the paginate-by-slide prop.goto( mark).Most likely to an index. If paginate-by-slide is inaccurate, this translates to a webpage countered. If true, this corresponds to a slide countered.Events.Find https://vue-ssr-carousel.netlify.app/events.Events.Description.adjustment( index ).Fired when the inner mark counter modifications.input.Like adjustment but meant for usage with v-model.push.Shot on mouse or even contact down.release.Shot on mouse or even repair.nuisance: start.Shot on start of yanking.bother: end.Fired on end of yanking.tween: begin( index ).Discharged when the slide carousel begins tweening to it's final setting.tween: end( mark ).Shot when the carousel has ended up tweening to it's location.