.A functionality concentrated Vue slide carousel designed for SSR/SSG settings. No JS is actually utilized to layout the slide carousel or it's slides. The target is actually to improve LCP as well as CLS ratings given that there is no design or markup improvements when JS hydates. It's mainly designed for providing "memory card" design slides (like for linking to write-ups or items) where the carousel-ness is actually conditionally applied based on the number of cards that are slotted in and also the viewport size.Have a look at the trial: https://vue-ssr-carousel.netlify.app.Put in.anecdote include vue-ssr-carousel.Nonpayment.import SsrCarousel from 'vue-ssr-carousel'.bring in ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment 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 created with v-for, make use of vital market values that are actually based upon the data you are actually looping by means of. In short, carry out v-for=" slide in slides": secret=' slide.id' instead that v-for=" slide, mark in slides": trick=' index'.Do not utilize v-if on the root element of slide parts.API.Props.Slots.Ports.Explanation.nonpayment.Where your slides obtain injected.back-arrow.Switch out the nonpayment back icon. Port props:.handicapped - True if initially web page when not knotting.next-arrow.Switch out the default next image. Port props:.disabled - Real if finally page when certainly not looping.dot.Substitute the nonpayment pagination dots. Port props:.index - The web page index that the dot represents.disabled - True if dot embodies present page.Approaches.Approaches.Description.following().Go ahead a page or even slide, depending upon the paginate-by-slide uphold.back().Return a page or even slide, relying on the paginate-by-slide prop.goto( mark).Visit an index. If paginate-by-slide is untrue, this corresponds to a page countered. If correct, this relates to a slide offset.Celebrations.Observe https://vue-ssr-carousel.netlify.app/events.Activities.Description.change( mark ).Axed when the inner mark counter modifications.input.Same as modification but intended for usage along with v-model.press.Fired on mouse or even touch down.release.Fired on mouse or patch up.burden: start.Fired on beginning of yanking.burden: end.Fired on end of dragging.tween: beginning( index ).Fired when the carousel starts tweening to it's final posture.tween: edge( index ).Discharged when the slide carousel has actually ended up tweening to it is actually destination.