.An efficiency concentrated Vue carousel developed for SSR/SSG settings. No JS is utilized to format the slide carousel or even it is actually slides. The objective is to strengthen LCP and CLS ratings because there is no design or profit changes when JS hydates. It's primarily created for rendering "memory card" style slides (like for linking to short articles or even products) where the carousel-ness is conditionally administered based upon the number of cards that are slotted in along with the viewport distance.Look at the trial: https://vue-ssr-carousel.netlify.app.Install.yarn add vue-ssr-carousel.Nonpayment.import SsrCarousel coming from 'vue-ssr-carousel'.bring in ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For even more examples, see the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated with v-for, use key market values that are based on the data you are actually looping through. To put it simply, do v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, mark in slides": key=' mark'.Do not make use of v-if on the origin component of slide parts.API.Props.Ports.Slots.Explanation.default.Where your slides get administered.back-arrow.Switch out the default back icon. Port props:.impaired - Correct if at first web page when not knotting.next-arrow.Switch out the default upcoming image. Port props:.handicapped - Correct if at last page when certainly not knotting.dot.Substitute the default pagination dots. Slot props:.index - The page index that the dot stands for.disabled - Real if dot embodies existing page.Methods.Methods.Explanation.following().Go ahead a webpage or even slide, depending on the paginate-by-slide prop.back().Return a webpage or even slide, depending on the paginate-by-slide set.goto( mark).Head to a mark. If paginate-by-slide is actually incorrect, this relates to a page countered. If real, this relates to a slide made up for.Occasions.View https://vue-ssr-carousel.netlify.app/events.Celebrations.Summary.change( mark ).Discharged when the interior mark counter adjustments.input.Same as improvement however aimed for make use of with v-model.press.Fired on mouse or touch down.launch.Shot on computer mouse or touch up.nuisance: begin.Fired on beginning of dragging.nuisance: end.Shot on end of yanking.tween: start( index ).Fired when the carousel begins tweening to it's final posture.tween: edge( index ).Shot when the slide carousel has actually completed tweening to it's destination.