.A functionality centered Vue carousel developed for SSR/SSG environments. No JS is made use of to format the slide carousel or even it's slides. The objective is to improve LCP as well as CLS scores due to the fact that there is no format or even markup modifications when JS hydates. It's largely created for rendering "card" design slides (like for connecting to short articles or even items) where the carousel-ness is conditionally applied based on the number of memory cards that are slotted in and also the viewport distance.Browse through the demo: https://vue-ssr-carousel.netlify.app.Mount.anecdote include vue-ssr-carousel.Nonpayment.bring in SsrCarousel coming 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']Use.Slide 1.Slide 2.Slide 3.For additional examples, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced along with v-for, make use of key worths that are based upon the records you are knotting with. In short, do v-for=" slide in slides": key=' slide.id' rather that v-for=" slide, mark in slides": secret=' mark'.Do not use v-if on the origin factor of slide parts.API.Props.Slots.Ports.Explanation.nonpayment.Where your slides obtain injected.back-arrow.Substitute the default back icon. Slot props:.disabled - Real if in the beginning web page when certainly not looping.next-arrow.Substitute the nonpayment next icon. Port props:.disabled - True if at last webpage when certainly not knotting.dot.Replace the nonpayment pagination dots. Slot props:.mark - The page index that the dot works with.handicapped - Accurate if dot works with current page.Approaches.Strategies.Summary.next().Go forward a web page or slide, depending on the paginate-by-slide uphold.back().Return a page or even slide, depending upon the paginate-by-slide prop.goto( index).Head to a mark. If paginate-by-slide is false, this relates to a web page balanced out. If real, this corresponds to a slide countered.Occasions.Observe https://vue-ssr-carousel.netlify.app/events.Celebrations.Description.improvement( mark ).Discharged when the interior index counter adjustments.input.Same as change yet aimed for usage with v-model.press.Shot on mouse or touch down.release.Shot on computer mouse or patch up.drag: start.Fired on start of yanking.drag: end.Shot on end of dragging.tween: begin( mark ).Fired when the slide carousel begins tweening to it is actually final posture.tween: edge( index ).Fired when the slide carousel has completed tweening to it's place.