.A functionality focused Vue slide carousel made for SSR/SSG settings. No JS is made use of to style the slide carousel or it's slides. The goal is to strengthen LCP as well as CLS scores given that there is no style or profit changes when JS hydates. It's mostly made for rendering "card" style slides (like for connecting to write-ups or even products) where the carousel-ness is conditionally administered based on the number of cards that are slotted in and also the viewport width.Have a look at the trial: https://vue-ssr-carousel.netlify.app.Set up.yarn 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']Consumption.Slide 1.Slide 2.Slide 3.For additional examples, see the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are actually produced with v-for, make use of key market values that are actually based on the records you are actually looping with. In other words, carry out v-for=" slide in slides": key=' slide.id' rather that v-for=" slide, index in slides": trick=' mark'.Do not make use of v-if on the origin component of slide elements.API.Props.Ports.Slots.Description.default.Where your slides obtain injected.back-arrow.Replace the default back image. Slot props:.disabled - Correct if initially page when certainly not knotting.next-arrow.Change the default following icon. Port props:.impaired - Real if at last page when not looping.dot.Substitute the default pagination dots. Slot props:.index - The webpage index that the dot stands for.impaired - Accurate if dot works with present web page.Approaches.Methods.Summary.next().Go ahead a page or slide, depending upon the paginate-by-slide prop.back().Get back a web page or slide, depending on the paginate-by-slide uphold.goto( index).Most likely to a mark. If paginate-by-slide is untrue, this relates to a webpage countered. If true, this translates to a slide balanced out.Occasions.See https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.improvement( mark ).Fired when the interior index counter improvements.input.Like change but planned for make use of along with v-model.push.Shot on computer mouse or even contact down.launch.Shot on computer mouse or even touch up.drag: beginning.Fired on beginning of tugging.burden: end.Fired on end of tugging.tween: beginning( mark ).Discharged when the slide carousel begins tweening to it is actually ultimate setting.tween: end( mark ).Terminated when the carousel has actually completed tweening to it's place.