.A performance centered Vue carousel created for SSR/SSG environments. No JS is actually used to format the slide carousel or even it is actually slides. The goal is to boost LCP and also CLS credit ratings due to the fact that there is no style or even markup changes when JS hydates. It's mostly made for rendering "card" style slides (like for connecting to articles or items) where the carousel-ness is actually conditionally administered based on the number of cards that are slotted in and also the viewport distance.Look into the demo: https://vue-ssr-carousel.netlify.app.Put in.yarn add vue-ssr-carousel.Default.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']Consumption.Slide 1.Slide 2.Slide 3.For more examples, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced along with v-for, use vital market values that are based on the records you are looping through. To put it simply, perform v-for=" slide in slides": trick=' slide.id' rather that v-for=" slide, mark in slides": key=' mark'.Don't utilize v-if on the origin aspect of slide elements.API.Props.Ports.Slots.Explanation.default.Where your slides get infused.back-arrow.Switch out the default back icon. Slot props:.handicapped - Correct if in the beginning page when not looping.next-arrow.Replace the default next symbol. Port props:.impaired - Correct if at last web page when certainly not knotting.dot.Switch out the default pagination dots. Port props:.mark - The page mark that the dot represents.disabled - Real if dot exemplifies present webpage.Methods.Techniques.Explanation.upcoming().Go ahead a web page or even slide, relying on the paginate-by-slide prop.back().Return a page or even slide, depending on the paginate-by-slide set.goto( mark).Go to a mark. If paginate-by-slide is incorrect, this relates to a webpage balanced out. If correct, this translates to a slide balanced out.Events.See https://vue-ssr-carousel.netlify.app/events.Celebrations.Summary.adjustment( mark ).Terminated when the internal mark counter adjustments.input.Like improvement yet meant for use with v-model.push.Fired on computer mouse or contact down.launch.Fired on computer mouse or even touch up.nuisance: start.Shot on begin of pulling.nuisance: end.Fired on end of dragging.tween: begin( index ).Discharged when the carousel starts tweening to it's ultimate position.tween: edge( mark ).Terminated when the slide carousel has actually ended up tweening to it is actually destination.