.A functionality centered Vue carousel created for SSR/SSG environments. No JS is actually used to format the carousel or even it's slides. The target is actually to boost LCP as well as CLS scores given that there is actually no format or markup adjustments when JS hydates. It is actually largely developed for rendering "memory card" style slides (like for connecting to articles or even items) where the carousel-ness is conditionally used based upon the number of memory cards that are slotted in and also the viewport distance.Browse through the demo: https://vue-ssr-carousel.netlify.app.Set up.yarn incorporate vue-ssr-carousel.Default.bring in 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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, find the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created along with v-for, make use of vital worths that are actually based on the information you are looping by means of. In short, do v-for=" slide in slides": secret=' slide.id' somewhat that v-for=" slide, index in slides": trick=' index'.Don't make use of v-if on the origin factor of slide components.API.Props.Slots.Slots.Description.default.Where your slides obtain infused.back-arrow.Replace the default back symbol. Port props:.disabled - Accurate if in the beginning webpage when certainly not looping.next-arrow.Replace the nonpayment upcoming image. Slot props:.impaired - Real if finally web page when not looping.dot.Substitute the nonpayment pagination dots. Slot props:.mark - The web page mark that the dot works with.disabled - Real if dot embodies current web page.Procedures.Procedures.Explanation.next().Go ahead a web page or slide, relying on the paginate-by-slide set.back().Get back a web page or even slide, relying on the paginate-by-slide set.goto( mark).Visit an index. If paginate-by-slide is actually false, this relates to a page made up for. If true, this translates to a slide offset.Celebrations.Observe https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.change( index ).Fired when the inner mark counter improvements.input.Like change however planned for use with v-model.push.Shot on computer mouse or even touch down.launch.Shot on computer mouse or even repair.nuisance: begin.Fired on start of tugging.pain: end.Shot on end of yanking.tween: begin( mark ).Fired when the slide carousel begins tweening to it's final placement.tween: edge( index ).Shot when the carousel has actually ended up tweening to it is actually destination.