.An efficiency centered Vue slide carousel developed for SSR/SSG environments. No JS is actually utilized to format the slide carousel or even it's slides. The goal is to improve LCP and also CLS ratings because there is actually no layout or even profit improvements when JS hydates. It is actually largely made for providing "memory card" style slides (like for connecting to articles or products) where the carousel-ness is conditionally administered based upon the lot of cards that are actually slotted in along with the viewport width.Look at the demo: https://vue-ssr-carousel.netlify.app.Install.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 default buildModules: [' vue-ssr-carousel/nuxt']Consumption.Slide 1.Slide 2.Slide 3.For more examples, view the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated with v-for, utilize vital worths that are based on the records you are actually looping through. In short, carry out v-for=" slide in slides": key=' slide.id' somewhat that v-for=" slide, mark in slides": secret=' index'.Do not utilize v-if on the root element of slide components.API.Props.Ports.Ports.Summary.nonpayment.Where your slides get administered.back-arrow.Switch out the default back icon. Slot props:.handicapped - True if at first web page when certainly not looping.next-arrow.Switch out the nonpayment upcoming symbol. Port props:.handicapped - True if at last web page when certainly not knotting.dot.Change the nonpayment pagination dots. Slot props:.index - The webpage mark that the dot exemplifies.handicapped - True if dot embodies current web page.Procedures.Procedures.Summary.following().Go forward a page or even slide, depending upon the paginate-by-slide prop.back().Get back a web page or even slide, depending on the paginate-by-slide prop.goto( index).Most likely to a mark. If paginate-by-slide is inaccurate, this relates to a page made up for. If accurate, this translates to a slide countered.Celebrations.View https://vue-ssr-carousel.netlify.app/events.Events.Explanation.improvement( index ).Terminated when the internal mark counter improvements.input.Like improvement yet planned for make use of along with v-model.push.Shot on mouse or contact down.launch.Fired on mouse or touch up.burden: begin.Fired on start of tugging.nuisance: end.Fired on end of yanking.tween: start( mark ).Fired when the carousel starts tweening to it's ultimate position.tween: edge( index ).Terminated when the carousel has actually finished tweening to it is actually place.