.A performance centered Vue carousel created for SSR/SSG environments. No JS is made use of to format the carousel or even it's slides. The target is actually to strengthen LCP as well as CLS credit ratings since there is actually no format or profit modifications when JS hydates. It is actually mostly designed for providing "memory card" type slides (like for connecting to posts or even items) where the carousel-ness is conditionally administered based on the number of memory cards that are slotted in in addition to the viewport distance.Check out the demonstration: https://vue-ssr-carousel.netlify.app.Put in.anecdote incorporate vue-ssr-carousel.Default.bring in SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For more instances, view the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated with v-for, use crucial market values that are based upon the information you are knotting via. In short, do v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, mark in slides": trick=' mark'.Don't make use of v-if on the root aspect of slide parts.API.Props.Slots.Slots.Description.default.Where your slides acquire injected.back-arrow.Replace the nonpayment back symbol. Slot props:.impaired - Accurate if in the beginning page when not looping.next-arrow.Substitute the nonpayment next image. Port props:.handicapped - True if finally page when certainly not looping.dot.Replace the nonpayment pagination dots. Port props:.index - The webpage index that the dot stands for.impaired - Real if dot stands for existing webpage.Strategies.Procedures.Explanation.upcoming().Move forward a page or even slide, relying on the paginate-by-slide prop.back().Go back a page or slide, relying on the paginate-by-slide uphold.goto( index).Head to an index. If paginate-by-slide is actually false, this translates to a web page made up for. If accurate, this relates to a slide countered.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Events.Description.improvement( mark ).Shot when the inner mark counter changes.input.Like modification yet planned for usage with v-model.push.Shot on mouse or touch down.release.Shot on computer mouse or retouch.nuisance: beginning.Shot on start of moving.burden: end.Fired on end of yanking.tween: beginning( index ).Fired when the carousel begins tweening to it is actually ultimate position.tween: edge( index ).Terminated when the carousel has ended up tweening to it's destination.