.An efficiency centered Vue slide carousel made for SSR/SSG settings. No JS is utilized to style the carousel or even it is actually slides. The target is actually to boost LCP and also CLS ratings given that there is no design or markup modifications when JS hydates. It is actually largely created for making "card" type slides (like for linking to posts or products) where the carousel-ness is actually conditionally administered based upon the lot of cards that are actually slotted in and also the viewport distance.Browse through the demonstration: https://vue-ssr-carousel.netlify.app.Put up.anecdote add vue-ssr-carousel.Default.bring in SsrCarousel from 'vue-ssr-carousel'.bring in ssrCarouselCss 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, find the demo: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated with v-for, utilize crucial worths that are based on the information you are actually knotting via. In short, carry out v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, index in slides": trick=' index'.Don't utilize v-if on the root factor of slide components.API.Props.Slots.Ports.Explanation.default.Where your slides acquire administered.back-arrow.Switch out the default back symbol. Slot props:.disabled - Real if initially webpage when not knotting.next-arrow.Change the default following symbol. Slot props:.disabled - Real if at last page when not looping.dot.Switch out the nonpayment pagination dots. Slot props:.mark - The web page index that the dot exemplifies.disabled - Real if dot works with existing web page.Methods.Strategies.Description.upcoming().Move forward a page or slide, depending on the paginate-by-slide prop.back().Return a web page or even slide, relying on the paginate-by-slide set.goto( index).Head to a mark. If paginate-by-slide is untrue, this translates to a webpage balanced out. If accurate, this corresponds to a slide made up for.Activities.Observe https://vue-ssr-carousel.netlify.app/events.Events.Summary.adjustment( mark ).Shot when the internal index counter changes.input.Same as adjustment but aimed for usage along with v-model.push.Shot on computer mouse or contact down.release.Shot on computer mouse or even touch up.burden: beginning.Shot on begin of tugging.bother: end.Fired on end of yanking.tween: begin( index ).Discharged when the slide carousel starts tweening to it is actually final posture.tween: end( mark ).Discharged when the carousel has completed tweening to it is actually place.