.An efficiency concentrated Vue slide carousel designed for SSR/SSG atmospheres. No JS is used to layout the carousel or it's slides. The goal is actually to strengthen LCP as well as CLS credit ratings due to the fact that there is actually no design or markup improvements when JS hydates. It is actually predominantly designed for providing "card" style slides (like for linking to posts or items) where the carousel-ness is actually conditionally used based upon the lot of cards that are actually slotted in along with the viewport distance.Look into the demo: https://vue-ssr-carousel.netlify.app.Set up.yarn include vue-ssr-carousel.Default.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 default buildModules: [' vue-ssr-carousel/nuxt']Usage.Slide 1.Slide 2.Slide 3.For more examples, observe the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually created along with v-for, make use of crucial market values that are based upon the data you are knotting via. To put it simply, do v-for=" slide in slides": secret=' slide.id' somewhat that v-for=" slide, index in slides": secret=' mark'.Don't use v-if on the origin component of slide parts.API.Props.Slots.Slots.Explanation.default.Where your slides receive injected.back-arrow.Change the nonpayment back image. Port props:.disabled - Correct if in the beginning webpage when certainly not looping.next-arrow.Substitute the default next image. Slot props:.impaired - Accurate if at last page when not looping.dot.Change the default pagination dots. Slot props:.index - The web page mark that the dot works with.handicapped - Accurate if dot exemplifies present web page.Approaches.Approaches.Explanation.following().Go forward a webpage or even slide, relying on the paginate-by-slide prop.back().Return a web page or even slide, depending upon the paginate-by-slide set.goto( mark).Go to a mark. If paginate-by-slide is false, this translates to a web page countered. If accurate, this corresponds to a slide countered.Activities.Observe https://vue-ssr-carousel.netlify.app/events.Activities.Description.change( mark ).Fired when the internal mark counter modifications.input.Like modification but meant for use with v-model.press.Shot on mouse or even contact down.release.Shot on mouse or touch up.pain: start.Fired on beginning of yanking.nuisance: end.Fired on end of yanking.tween: begin( index ).Discharged when the carousel begins tweening to it is actually ultimate setting.tween: end( mark ).Discharged when the carousel has actually ended up tweening to it is actually destination.