.An efficiency centered Vue carousel designed for SSR/SSG atmospheres. No JS is utilized to design the carousel or even it's slides. The target is actually to boost LCP and CLS scores since there is actually no format or profit improvements when JS hydates. It's primarily designed for rendering "memory card" design slides (like for connecting to articles or even products) where the carousel-ness is actually conditionally applied based on the number of cards that are actually slotted in in addition to the viewport size.Check out the demo: https://vue-ssr-carousel.netlify.app.Install.anecdote add vue-ssr-carousel.Default.bring in SsrCarousel coming from 'vue-ssr-carousel'.bring in 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 additional examples, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created with v-for, use vital worths that are actually based upon the data you are looping through. In short, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, mark in slides": trick=' index'.Do not use v-if on the origin aspect of slide components.API.Props.Ports.Slots.Summary.nonpayment.Where your slides obtain injected.back-arrow.Change the nonpayment back image. Slot props:.disabled - Real if at first page when certainly not looping.next-arrow.Replace the nonpayment upcoming icon. Slot props:.disabled - Accurate if finally web page when certainly not looping.dot.Substitute the nonpayment pagination dots. Slot props:.index - The webpage index that the dot works with.impaired - Real if dot exemplifies present webpage.Approaches.Approaches.Description.upcoming().Go forward a web page or even slide, relying on the paginate-by-slide prop.back().Return a web page or slide, depending on the paginate-by-slide set.goto( index).Head to an index. If paginate-by-slide is untrue, this corresponds to a web page countered. If true, this equates to a slide balanced out.Celebrations.Observe https://vue-ssr-carousel.netlify.app/events.Celebrations.Description.improvement( index ).Discharged when the interior index counter changes.input.Same as adjustment but intended for use with v-model.push.Shot on computer mouse or even touch down.launch.Fired on computer mouse or retouch.bother: beginning.Shot on start of tugging.drag: end.Shot on end of pulling.tween: start( index ).Discharged when the carousel starts tweening to it's ultimate setting.tween: end( index ).Discharged when the slide carousel has actually ended up tweening to it's place.