.A performance concentrated Vue carousel made for SSR/SSG settings. No JS is actually made use of to layout the carousel or it is actually slides. The goal is actually to strengthen LCP as well as CLS ratings considering that there is no layout or profit improvements when JS hydates. It is actually predominantly designed for leaving "card" type slides (like for connecting to articles or items) where the carousel-ness is conditionally administered based on the lot of memory cards that are actually slotted in along with the viewport size.Look at the demo: https://vue-ssr-carousel.netlify.app.Install.yarn include 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, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated along with v-for, make use of vital values that are based upon the information you are actually knotting with. Simply put, perform v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, index in slides": key=' index'.Don't use v-if on the root component of slide parts.API.Props.Ports.Slots.Description.default.Where your slides obtain administered.back-arrow.Switch out the nonpayment back symbol. Slot props:.impaired - True if initially web page when certainly not knotting.next-arrow.Substitute the default following icon. Slot props:.impaired - Real if finally web page when certainly not looping.dot.Switch out the default pagination dots. Port props:.mark - The web page index that the dot works with.impaired - True if dot works with present page.Approaches.Procedures.Explanation.following().Go forward a web page or slide, depending upon the paginate-by-slide set.back().Go back a page or slide, relying on the paginate-by-slide set.goto( index).Visit a mark. If paginate-by-slide is actually untrue, this relates to a web page offset. If accurate, this translates to a slide made up for.Celebrations.See https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.change( index ).Fired when the internal mark counter adjustments.input.Same as change yet intended for make use of with v-model.push.Shot on mouse or even contact down.launch.Shot on computer mouse or even touch up.drag: beginning.Shot on begin of pulling.nuisance: end.Shot on end of tugging.tween: beginning( index ).Fired when the slide carousel starts tweening to it is actually ultimate posture.tween: edge( mark ).Axed when the carousel has completed tweening to it's place.