.An efficiency concentrated Vue slide carousel designed for SSR/SSG environments. No JS is actually made use of to style the slide carousel or even it is actually slides. The target is to improve LCP and CLS credit ratings since there is actually no format or profit improvements when JS hydates. It's primarily developed for providing "memory card" type slides (like for connecting to short articles or even products) where the carousel-ness is actually conditionally applied based upon the number of memory cards that are actually slotted in and also the viewport width.Check out the demonstration: https://vue-ssr-carousel.netlify.app.Install.anecdote add vue-ssr-carousel.Nonpayment.import SsrCarousel coming 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']Utilization.Slide 1.Slide 2.Slide 3.For more instances, view the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced with v-for, utilize essential worths that are based upon the information you are actually knotting through. In short, carry out v-for=" slide in slides": key=' slide.id' instead that v-for=" slide, index in slides": trick=' mark'.Do not use v-if on the origin element of slide components.API.Props.Ports.Slots.Description.nonpayment.Where your slides receive injected.back-arrow.Change the default back image. Slot props:.disabled - True if initially page when not knotting.next-arrow.Switch out the nonpayment following image. Slot props:.disabled - Real if at last page when certainly not looping.dot.Substitute the default pagination dots. Port props:.index - The web page mark that the dot exemplifies.handicapped - Accurate if dot represents present web page.Methods.Methods.Summary.upcoming().Move forward a page or even slide, depending upon the paginate-by-slide uphold.back().Go back a webpage or even slide, depending on the paginate-by-slide uphold.goto( index).Visit an index. If paginate-by-slide is actually inaccurate, this equates to a webpage made up for. If true, this corresponds to a slide made up for.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.modification( index ).Terminated when the inner mark counter changes.input.Same as modification but planned for usage with v-model.push.Fired on mouse or contact down.launch.Fired on computer mouse or even retouch.bother: start.Fired on begin of dragging.burden: end.Shot on end of yanking.tween: beginning( index ).Fired when the slide carousel starts tweening to it is actually last placement.tween: edge( index ).Discharged when the carousel has actually ended up tweening to it is actually location.