.A functionality centered Vue slide carousel made for SSR/SSG settings. No JS is actually utilized to design the carousel or even it is actually slides. The target is to strengthen LCP and also CLS scores given that there is actually no format or profit adjustments when JS hydates. It's mainly developed for providing "card" type slides (like for connecting to short articles or even products) where the carousel-ness is conditionally administered based on the lot of memory cards that are actually slotted in along with the viewport width.Visit the demonstration: https://vue-ssr-carousel.netlify.app.Put in.anecdote 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 nonpayment buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For additional instances, find the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated along with v-for, use essential worths that are actually based upon the records you are looping through. In other words, do v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, index in slides": key=' index'.Do not utilize v-if on the root aspect of slide elements.API.Props.Slots.Ports.Summary.default.Where your slides receive infused.back-arrow.Change the nonpayment back symbol. Slot props:.disabled - Real if in the beginning webpage when certainly not knotting.next-arrow.Switch out the nonpayment following image. Slot props:.disabled - Real if at last web page when certainly not looping.dot.Change the default pagination dots. Port props:.index - The webpage index that the dot embodies.handicapped - Real if dot exemplifies current web page.Methods.Approaches.Summary.following().Move forward a webpage or slide, relying on the paginate-by-slide prop.back().Go back a page or even slide, depending upon the paginate-by-slide uphold.goto( index).Go to a mark. If paginate-by-slide is misleading, this relates to a page offset. If accurate, this translates to a slide offset.Activities.See https://vue-ssr-carousel.netlify.app/events.Activities.Summary.improvement( index ).Axed when the internal index counter changes.input.Same as modification however planned for usage with v-model.press.Shot on computer mouse or even contact down.launch.Shot on computer mouse or even repair.drag: beginning.Fired on beginning of yanking.nuisance: end.Fired on end of moving.tween: begin( index ).Fired when the slide carousel begins tweening to it is actually last setting.tween: edge( index ).Shot when the carousel has finished tweening to it's destination.