.A functionality centered Vue carousel designed for SSR/SSG environments. No JS is actually made use of to layout the carousel or it is actually slides. The target is to strengthen LCP and also CLS scores due to the fact that there is actually no design or profit adjustments when JS hydates. It's mainly made for providing "card" style slides (like for linking to articles or even products) where the carousel-ness is actually conditionally applied based on the number of memory cards that are actually slotted in and also the viewport width.Check out the demo: https://vue-ssr-carousel.netlify.app.Set up.yarn include vue-ssr-carousel.Nonpayment.bring in SsrCarousel coming from 'vue-ssr-carousel'.bring in ssrCarouselCss coming from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For additional examples, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated with v-for, use crucial worths that are actually based on the data you are actually knotting via. To put it simply, do v-for=" slide in slides": key=' slide.id' instead that v-for=" slide, mark in slides": key=' mark'.Don't utilize v-if on the origin component of slide parts.API.Props.Slots.Slots.Summary.nonpayment.Where your slides get infused.back-arrow.Change the nonpayment back image. Slot props:.impaired - Correct if initially web page when not looping.next-arrow.Replace the nonpayment upcoming image. Port props:.impaired - Accurate if at last webpage when certainly not looping.dot.Switch out the default pagination dots. Port props:.mark - The web page index that the dot represents.impaired - True if dot exemplifies current webpage.Approaches.Strategies.Description.following().Go ahead a webpage or even slide, depending upon the paginate-by-slide prop.back().Return a webpage or even slide, depending upon the paginate-by-slide set.goto( index).Visit a mark. If paginate-by-slide is actually inaccurate, this relates to a page countered. If correct, this corresponds to a slide offset.Activities.See https://vue-ssr-carousel.netlify.app/events.Events.Description.modification( mark ).Terminated when the inner mark counter improvements.input.Like change but aimed for use along with v-model.push.Fired on computer mouse or even contact down.launch.Shot on computer mouse or patch up.bother: begin.Fired on beginning of tugging.drag: end.Shot on end of dragging.tween: start( index ).Fired when the carousel starts tweening to it's last setting.tween: edge( index ).Terminated when the carousel has finished tweening to it is actually destination.