.A performance focused Vue slide carousel designed for SSR/SSG environments. No JS is actually utilized to layout the slide carousel or even it is actually slides. The objective is actually to enhance LCP and also CLS ratings given that there is no layout or markup changes when JS hydates. It is actually mostly designed for leaving "memory card" type slides (like for connecting to short articles or items) where the carousel-ness is conditionally applied based upon the amount of cards that are slotted in and also the viewport size.Browse through the demo: https://vue-ssr-carousel.netlify.app.Mount.yarn add vue-ssr-carousel.Nonpayment.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 nonpayment buildModules: [' vue-ssr-carousel/nuxt']Use.Slide 1.Slide 2.Slide 3.For even more examples, find the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced with v-for, utilize key market values that are actually based on the information you are looping through. To put it simply, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, index in slides": key=' index'.Don't use v-if on the root aspect of slide components.API.Props.Slots.Slots.Explanation.default.Where your slides obtain injected.back-arrow.Replace the default back image. Port props:.disabled - Real if initially webpage when certainly not looping.next-arrow.Change the nonpayment next icon. Port props:.disabled - Real if at last webpage when not knotting.dot.Change the nonpayment pagination dots. Slot props:.mark - The web page mark that the dot exemplifies.impaired - Real if dot embodies current web page.Methods.Procedures.Explanation.next().Go ahead a web page or even slide, depending upon the paginate-by-slide uphold.back().Go back a page or even slide, relying on the paginate-by-slide uphold.goto( mark).Go to a mark. If paginate-by-slide is actually false, this corresponds to a web page made up for. If correct, this corresponds to a slide balanced out.Activities.View https://vue-ssr-carousel.netlify.app/events.Events.Summary.improvement( mark ).Shot when the inner index counter improvements.input.Same as adjustment yet planned for usage along with v-model.push.Shot on computer mouse or touch down.release.Shot on computer mouse or patch up.nuisance: begin.Shot on beginning of moving.bother: end.Fired on end of tugging.tween: beginning( index ).Discharged when the slide carousel begins tweening to it's final posture.tween: edge( mark ).Terminated when the carousel has actually ended up tweening to it's location.