.A functionality concentrated Vue slide carousel made for SSR/SSG environments. No JS is actually utilized to layout the carousel or even it's slides. The target is actually to improve LCP and also CLS ratings due to the fact that there is actually no format or markup changes when JS hydates. It is actually primarily made for rendering "card" type slides (like for linking to short articles or products) where the carousel-ness is conditionally applied based upon the lot of cards that are actually slotted in in addition to the viewport size.Check out the demonstration: https://vue-ssr-carousel.netlify.app.Put in.anecdote incorporate vue-ssr-carousel.Nonpayment.bring in SsrCarousel from 'vue-ssr-carousel'.bring in ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment buildModules: [' vue-ssr-carousel/nuxt']Use.Slide 1.Slide 2.Slide 3.For even more instances, observe the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created along with v-for, use crucial worths that are actually based upon the information you are knotting through. In other words, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, mark in slides": key=' index'.Don't use v-if on the root component of slide components.API.Props.Ports.Ports.Description.default.Where your slides get infused.back-arrow.Switch out the default back symbol. Port props:.handicapped - Correct if initially page when not knotting.next-arrow.Substitute the default upcoming symbol. Port props:.impaired - Real if finally webpage when not knotting.dot.Replace the nonpayment pagination dots. Slot props:.index - The page index that the dot stands for.handicapped - Real if dot represents existing page.Procedures.Methods.Explanation.next().Go forward a page or even slide, depending on the paginate-by-slide set.back().Return a web page or even slide, relying on the paginate-by-slide prop.goto( mark).Head to an index. If paginate-by-slide is inaccurate, this corresponds to a page made up for. If true, this equates to a slide offset.Occasions.See https://vue-ssr-carousel.netlify.app/events.Occasions.Explanation.modification( mark ).Terminated when the inner mark counter improvements.input.Same as improvement however wanted for usage with v-model.push.Shot on mouse or contact down.launch.Shot on mouse or patch up.drag: start.Fired on beginning of tugging.burden: end.Fired on end of moving.tween: begin( mark ).Fired when the carousel begins tweening to it is actually ultimate posture.tween: end( mark ).Fired when the slide carousel has actually ended up tweening to it's place.