.A functionality focused Vue slide carousel created for SSR/SSG environments. No JS is made use of to layout the slide carousel or it is actually slides. The target is actually to strengthen LCP and CLS scores given that there is no format or even markup adjustments when JS hydates. It's mostly created for providing "card" design slides (like for linking to write-ups or items) where the carousel-ness is conditionally applied based upon the number of cards that are actually slotted in as well as the viewport size.Check out 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']Use.Slide 1.Slide 2.Slide 3.For additional examples, find the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created with v-for, utilize key worths that are actually based on the information you are looping through. In short, perform v-for=" slide in slides": trick=' slide.id' somewhat that v-for=" slide, mark in slides": secret=' index'.Don't use v-if on the root element of slide elements.API.Props.Ports.Slots.Explanation.nonpayment.Where your slides get infused.back-arrow.Replace the nonpayment back symbol. Slot props:.impaired - Real if initially web page when certainly not knotting.next-arrow.Substitute the default next symbol. Slot props:.impaired - Correct if at last webpage when certainly not looping.dot.Substitute the nonpayment pagination dots. Slot props:.index - The webpage index that the dot stands for.handicapped - Real if dot stands for existing webpage.Strategies.Strategies.Description.following().Move forward a page or slide, relying on the paginate-by-slide uphold.back().Return a web page or slide, relying on the paginate-by-slide set.goto( index).Go to a mark. If paginate-by-slide is false, this corresponds to a webpage made up for. If accurate, this translates to a slide made up for.Activities.Observe https://vue-ssr-carousel.netlify.app/events.Activities.Explanation.adjustment( index ).Fired when the inner mark counter changes.input.Same as adjustment but wanted for make use of with v-model.push.Shot on mouse or even contact down.launch.Fired on computer mouse or even repair.bother: beginning.Fired on beginning of yanking.burden: end.Fired on end of pulling.tween: begin( index ).Fired when the slide carousel begins tweening to it's final setting.tween: edge( index ).Discharged when the carousel has finished tweening to it's place.