.A functionality focused Vue carousel created for SSR/SSG atmospheres. No JS is actually made use of to design the carousel or even it is actually slides. The target is to improve LCP and CLS scores considering that there is no format or even profit adjustments when JS hydates. It is actually primarily developed for rendering "card" type slides (like for linking to write-ups or even products) where the carousel-ness is conditionally applied based on the amount of cards that are actually slotted in as well as the viewport distance.Take a look at the demonstration: https://vue-ssr-carousel.netlify.app.Install.anecdote incorporate vue-ssr-carousel.Default.import SsrCarousel from 'vue-ssr-carousel'.bring in 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 additional examples, find the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created along with v-for, utilize crucial market values that are based upon the data you are knotting via. In other words, perform v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, mark in slides": trick=' index'.Don't utilize v-if on the root factor of slide elements.API.Props.Slots.Ports.Description.nonpayment.Where your slides get injected.back-arrow.Replace the nonpayment back icon. Slot props:.disabled - Real if in the beginning webpage when certainly not knotting.next-arrow.Switch out the default following symbol. Slot props:.handicapped - Real if at last web page when not knotting.dot.Switch out the nonpayment pagination dots. Slot props:.index - The webpage mark that the dot stands for.impaired - Correct if dot stands for current page.Strategies.Methods.Explanation.next().Move forward a page or slide, depending upon the paginate-by-slide set.back().Go back a page or even slide, depending on the paginate-by-slide set.goto( mark).Head to a mark. If paginate-by-slide is actually inaccurate, this equates to a webpage made up for. If true, this relates to a slide countered.Celebrations.Find https://vue-ssr-carousel.netlify.app/events.Occasions.Summary.improvement( mark ).Shot when the internal mark counter changes.input.Same as change but aimed for usage with v-model.press.Fired on mouse or touch down.launch.Fired on computer mouse or patch up.pain: start.Shot on start of yanking.burden: end.Shot on end of pulling.tween: begin( mark ).Fired when the slide carousel starts tweening to it's final posture.tween: end( mark ).Discharged when the carousel has finished tweening to it is actually place.