.A performance centered Vue carousel designed for SSR/SSG settings. No JS is used to style the carousel or even it's slides. The objective is actually to improve LCP and also CLS scores due to the fact that there is actually no design or profit modifications when JS hydates. It's primarily made for providing "card" type slides (like for linking to posts or even products) where the carousel-ness is conditionally applied based upon the variety of memory cards that are slotted in and also the viewport size.Visit the trial: https://vue-ssr-carousel.netlify.app.Mount.yarn add vue-ssr-carousel.Default.import 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 even more examples, observe the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created with v-for, make use of key worths that are based upon the records you are actually looping with. In other words, do v-for=" slide in slides": trick=' slide.id' instead that v-for=" slide, mark in slides": key=' mark'.Do not make use of v-if on the origin aspect of slide components.API.Props.Slots.Slots.Description.default.Where your slides obtain injected.back-arrow.Switch out the default back image. Port props:.handicapped - Real if initially page when not looping.next-arrow.Substitute the default next icon. Slot props:.impaired - Accurate if at last web page when not knotting.dot.Replace the default pagination dots. Port props:.index - The page index that the dot works with.disabled - Accurate if dot embodies existing page.Approaches.Methods.Summary.next().Go forward a web page or slide, depending upon the paginate-by-slide uphold.back().Return a page or even slide, depending upon the paginate-by-slide prop.goto( mark).Most likely to an index. If paginate-by-slide is actually untrue, this relates to a web page offset. If true, this relates to a slide countered.Occasions.See https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.adjustment( index ).Fired when the inner mark counter modifications.input.Like adjustment however planned for usage with v-model.push.Shot on mouse or contact down.launch.Shot on mouse or even patch up.burden: start.Shot on start of dragging.burden: end.Shot on end of pulling.tween: begin( index ).Fired when the slide carousel begins tweening to it's ultimate setting.tween: end( mark ).Axed when the slide carousel has finished tweening to it is actually destination.