.An efficiency focused Vue slide carousel made for SSR/SSG atmospheres. No JS is actually utilized to design the carousel or even it is actually slides. The goal is to enhance LCP and also CLS ratings given that there is actually no format or even profit adjustments when JS hydates. It is actually mainly developed for making "memory card" design slides (like for linking to posts or products) where the carousel-ness is actually conditionally administered based on the variety of memory cards that are actually slotted in and also the viewport width.Visit the demonstration: https://vue-ssr-carousel.netlify.app.Put in.yarn incorporate vue-ssr-carousel.Default.bring in SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss coming 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 additional examples, observe the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated along with v-for, utilize crucial values that are based on the data you are actually looping via. Simply put, perform v-for=" slide in slides": key=' slide.id' instead that v-for=" slide, index in slides": secret=' mark'.Do not utilize v-if on the root component of slide components.API.Props.Ports.Ports.Explanation.default.Where your slides receive administered.back-arrow.Replace the default back symbol. Port props:.disabled - Real if in the beginning page when certainly not looping.next-arrow.Replace the nonpayment next icon. Slot props:.disabled - Accurate if finally webpage when not knotting.dot.Substitute the nonpayment pagination dots. Port props:.mark - The webpage index that the dot stands for.impaired - True if dot embodies existing page.Methods.Procedures.Summary.upcoming().Go forward a web page or slide, depending upon the paginate-by-slide uphold.back().Return a web page or slide, depending upon the paginate-by-slide uphold.goto( index).Visit a mark. If paginate-by-slide is actually misleading, this translates to a page offset. If accurate, this equates to a slide countered.Events.See https://vue-ssr-carousel.netlify.app/events.Celebrations.Description.change( index ).Shot when the inner index counter improvements.input.Same as adjustment but meant for use with v-model.push.Fired on mouse or contact down.launch.Shot on computer mouse or repair.drag: beginning.Shot on begin of yanking.nuisance: end.Fired on end of moving.tween: beginning( index ).Fired when the carousel starts tweening to it is actually final setting.tween: edge( index ).Axed when the slide carousel has actually completed tweening to it's destination.