.An efficiency focused Vue carousel designed for SSR/SSG environments. No JS is used to style the slide carousel or even it's slides. The target is actually to boost LCP and CLS ratings considering that there is actually no format or markup improvements when JS hydates. It's predominantly developed for rendering "card" style slides (like for linking to short articles or even products) where the carousel-ness is actually conditionally applied based on the number of memory cards that are slotted in as well as the viewport distance.Check out the demo: https://vue-ssr-carousel.netlify.app.Set up.yarn add vue-ssr-carousel.Nonpayment.import SsrCarousel from 'vue-ssr-carousel'.import ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export default buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For more instances, view the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced along with v-for, make use of crucial worths that are based on the information you are actually looping through. To put it simply, carry out v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, mark in slides": trick=' mark'.Don't utilize v-if on the origin aspect of slide elements.API.Props.Ports.Ports.Explanation.default.Where your slides get infused.back-arrow.Change the default back symbol. Slot props:.handicapped - Real if in the beginning web page when not knotting.next-arrow.Substitute the default next symbol. Slot props:.impaired - Real if at last web page when certainly not knotting.dot.Substitute the nonpayment pagination dots. Port props:.index - The webpage mark that the dot represents.impaired - Correct if dot stands for existing web page.Procedures.Techniques.Explanation.following().Go forward a webpage or even slide, relying on the paginate-by-slide uphold.back().Return a webpage or slide, depending on the paginate-by-slide uphold.goto( mark).Go to a mark. If paginate-by-slide is untrue, this corresponds to a page made up for. If true, this translates to a slide countered.Celebrations.See https://vue-ssr-carousel.netlify.app/events.Activities.Summary.adjustment( index ).Fired when the inner index counter modifications.input.Same as improvement yet wanted for make use of with v-model.press.Shot on mouse or even touch down.launch.Shot on computer mouse or even patch up.drag: begin.Fired on start of yanking.bother: end.Shot on end of tugging.tween: start( index ).Discharged when the carousel begins tweening to it's final setting.tween: edge( index ).Terminated when the slide carousel has finished tweening to it's place.