.An efficiency centered Vue carousel made for SSR/SSG environments. No JS is actually used to layout the slide carousel or it's slides. The target is actually to improve LCP as well as CLS credit ratings because there is no design or even markup modifications when JS hydates. It's largely made for providing "memory card" style slides (like for connecting to write-ups or even items) where the carousel-ness is conditionally used based upon the variety of memory cards that are slotted in along with the viewport width.Look at the demo: https://vue-ssr-carousel.netlify.app.Mount.yarn add vue-ssr-carousel.Default.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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created with v-for, make use of crucial market values that are actually based upon the data you are looping by means of. To put it simply, do v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, mark in slides": trick=' mark'.Do not use v-if on the root aspect of slide components.API.Props.Ports.Slots.Description.nonpayment.Where your slides obtain infused.back-arrow.Substitute the nonpayment back image. Port props:.disabled - True if at first webpage when certainly not looping.next-arrow.Change the default upcoming symbol. Port props:.handicapped - Correct if at last webpage when not knotting.dot.Substitute the default pagination dots. Slot props:.mark - The web page index that the dot embodies.impaired - Accurate if dot works with present page.Techniques.Techniques.Description.upcoming().Go ahead a web page or slide, depending on the paginate-by-slide uphold.back().Return a web page or even slide, relying on the paginate-by-slide set.goto( mark).Go to a mark. If paginate-by-slide is actually inaccurate, this translates to a webpage countered. If correct, this corresponds to a slide balanced out.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.improvement( mark ).Terminated when the interior mark counter changes.input.Like modification however planned for use with v-model.push.Shot on mouse or even contact down.launch.Shot on mouse or repair.bother: start.Fired on beginning of pulling.nuisance: end.Fired on end of dragging.tween: start( mark ).Fired when the slide carousel begins tweening to it is actually ultimate posture.tween: end( index ).Discharged when the carousel has ended up tweening to it's location.