.A performance centered Vue carousel made for SSR/SSG atmospheres. No JS is made use of to design the carousel or even it is actually slides. The objective is actually to improve LCP and CLS ratings given that there is actually no format or profit improvements when JS hydates. It's mostly designed for rendering "memory card" style slides (like for linking to articles or products) where the carousel-ness is conditionally administered based on the lot of cards that are slotted in in addition to the viewport size.Take a look at the trial: https://vue-ssr-carousel.netlify.app.Put up.yarn include vue-ssr-carousel.Default.import SsrCarousel 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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, see the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated with v-for, utilize key values that are actually based on the data you are actually knotting via. In other words, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, mark in slides": trick=' mark'.Do not use v-if on the origin factor of slide parts.API.Props.Slots.Ports.Explanation.nonpayment.Where your slides get injected.back-arrow.Substitute the default back image. Slot props:.impaired - Correct if in the beginning webpage when certainly not knotting.next-arrow.Substitute the nonpayment next image. Slot props:.disabled - Accurate if finally page when certainly not knotting.dot.Replace the default pagination dots. Slot props:.mark - The web page index that the dot stands for.impaired - Real if dot embodies present web page.Approaches.Procedures.Explanation.following().Go ahead a webpage or even slide, relying on the paginate-by-slide prop.back().Return a webpage or even slide, depending on the paginate-by-slide prop.goto( mark).Go to a mark. If paginate-by-slide is inaccurate, this corresponds to a page balanced out. If real, this equates to a slide offset.Events.See https://vue-ssr-carousel.netlify.app/events.Events.Description.adjustment( index ).Terminated when the internal mark counter modifications.input.Like change however wanted for make use of with v-model.press.Fired on mouse or even touch down.release.Shot on mouse or even retouch.burden: beginning.Fired on start of yanking.drag: end.Fired on end of moving.tween: start( index ).Fired when the carousel begins tweening to it's final position.tween: end( mark ).Axed when the slide carousel has finished tweening to it is actually location.