.An efficiency focused Vue slide carousel designed for SSR/SSG settings. No JS is utilized to layout the carousel or even it is actually slides. The goal is actually to improve LCP as well as CLS credit ratings given that there is no layout or profit changes when JS hydates. It's primarily designed for leaving "card" type slides (like for connecting to short articles or even products) where the carousel-ness is conditionally administered based upon the number of cards that are slotted in in addition to the viewport size.Browse through the demonstration: https://vue-ssr-carousel.netlify.app.Install.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']Consumption.Slide 1.Slide 2.Slide 3.For more instances, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created along with v-for, use crucial values that are actually based upon the data you are actually looping through. In other words, do v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, index in slides": key=' index'.Do not make use of v-if on the root component of slide parts.API.Props.Ports.Slots.Explanation.nonpayment.Where your slides obtain injected.back-arrow.Substitute the default back symbol. Slot props:.impaired - True if initially page when not looping.next-arrow.Replace the default following symbol. Slot props:.impaired - Accurate if at last webpage when not looping.dot.Switch out the default pagination dots. Slot props:.index - The webpage mark that the dot stands for.disabled - True if dot represents existing webpage.Procedures.Approaches.Description.following().Move forward a webpage or slide, relying on the paginate-by-slide prop.back().Get back a page or slide, depending upon the paginate-by-slide set.goto( mark).Visit a mark. If paginate-by-slide is actually false, this relates to a web page countered. If accurate, this relates to a slide offset.Activities.Find https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.adjustment( mark ).Axed when the internal mark counter modifications.input.Like improvement but meant for usage with v-model.press.Shot on mouse or even touch down.launch.Fired on computer mouse or retouch.bother: beginning.Shot on start of moving.nuisance: end.Fired on end of dragging.tween: begin( mark ).Discharged when the slide carousel starts tweening to it is actually final position.tween: end( mark ).Shot when the carousel has completed tweening to it's destination.