.A functionality focused Vue carousel made for SSR/SSG settings. No JS is actually made use of to design the carousel or even it's slides. The goal is actually to strengthen LCP as well as CLS ratings given that there is no style or even markup improvements when JS hydates. It is actually mostly made for making "card" type slides (like for linking to articles or items) where the carousel-ness is actually conditionally used based on the lot of cards that are actually slotted in and also the viewport size.Check out the trial: https://vue-ssr-carousel.netlify.app.Mount.yarn incorporate vue-ssr-carousel.Default.import SsrCarousel 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']Consumption.Slide 1.Slide 2.Slide 3.For even more instances, find the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are created with v-for, use crucial values that are actually based upon the data you are looping with. In short, carry out v-for=" slide in slides": trick=' slide.id' instead that v-for=" slide, index in slides": secret=' index'.Don't make use of v-if on the root component of slide components.API.Props.Ports.Slots.Description.nonpayment.Where your slides obtain administered.back-arrow.Substitute the default back icon. Port props:.impaired - Correct if initially page when not knotting.next-arrow.Replace the default following image. Port props:.impaired - True if at last webpage when not looping.dot.Substitute the default pagination dots. Port props:.index - The web page mark that the dot embodies.handicapped - True if dot exemplifies existing page.Techniques.Methods.Summary.upcoming().Go ahead a webpage or slide, relying on the paginate-by-slide uphold.back().Get back a web page or even slide, depending upon the paginate-by-slide set.goto( index).Go to an index. If paginate-by-slide is actually untrue, this relates to a webpage offset. If correct, this relates to a slide balanced out.Events.Find https://vue-ssr-carousel.netlify.app/events.Occasions.Description.adjustment( mark ).Axed when the internal mark counter improvements.input.Like improvement yet intended for use along with v-model.push.Fired on computer mouse or even contact down.launch.Shot on mouse or even repair.drag: beginning.Shot on start of moving.drag: end.Shot on end of pulling.tween: start( mark ).Fired when the carousel begins tweening to it's last position.tween: edge( index ).Axed when the slide carousel has completed tweening to it's place.