.An efficiency focused Vue slide carousel developed for SSR/SSG settings. No JS is made use of to layout the slide carousel or even it's slides. The goal is actually to enhance LCP as well as CLS credit ratings given that there is no style or even markup improvements when JS hydates. It's largely made for leaving "card" design slides (like for connecting to articles or products) where the carousel-ness is actually conditionally applied based upon the number of cards that are slotted in as well as the viewport width.Have a look at the trial: https://vue-ssr-carousel.netlify.app.Set up.yarn include vue-ssr-carousel.Default.import 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 examples, see the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually generated along with v-for, make use of key market values that are based upon the records you are actually looping via. Simply put, perform v-for=" slide in slides": secret=' slide.id' somewhat that v-for=" slide, index in slides": key=' index'.Don't utilize v-if on the origin aspect of slide elements.API.Props.Ports.Slots.Explanation.nonpayment.Where your slides receive administered.back-arrow.Switch out the default back icon. Port props:.impaired - Accurate if at first page when certainly not knotting.next-arrow.Switch out the default following image. Port props:.disabled - Correct if at last web page when certainly not looping.dot.Change the nonpayment pagination dots. Slot props:.mark - The webpage index that the dot exemplifies.handicapped - Accurate if dot exemplifies present web page.Approaches.Methods.Summary.upcoming().Go forward a web page or slide, depending on the paginate-by-slide uphold.back().Go back a web page or even slide, depending on the paginate-by-slide uphold.goto( index).Visit an index. If paginate-by-slide is incorrect, this relates to a web page balanced out. If accurate, this corresponds to a slide countered.Activities.Find https://vue-ssr-carousel.netlify.app/events.Events.Summary.modification( mark ).Discharged when the interior mark counter improvements.input.Like improvement but intended for usage with v-model.push.Fired on mouse or contact down.launch.Shot on computer mouse or even touch up.pain: start.Shot on begin of moving.bother: end.Fired on end of dragging.tween: start( index ).Discharged when the slide carousel starts tweening to it's last placement.tween: end( mark ).Discharged when the slide carousel has actually ended up tweening to it is actually destination.