.An efficiency focused Vue carousel designed for SSR/SSG atmospheres. No JS is made use of to design the carousel or it's slides. The target is to boost LCP as well as CLS credit ratings since there is actually no format or even markup adjustments when JS hydates. It is actually primarily created for leaving "memory card" design slides (like for connecting to write-ups or even items) where the carousel-ness is actually conditionally applied based on the amount of memory cards that are actually slotted in along with the viewport width.Take a look at the demo: https://vue-ssr-carousel.netlify.app.Put up.anecdote incorporate vue-ssr-carousel.Default.import SsrCarousel coming from 'vue-ssr-carousel'.import ssrCarouselCss from 'vue-ssr-carousel/index. css'.Vue.component 'ssr-carousel', SsrCarousel.Nuxt.// nuxt.config.js.export nonpayment buildModules: [' vue-ssr-carousel/nuxt']Utilization.Slide 1.Slide 2.Slide 3.For more instances, find the trial: https://vue-ssr-carousel.netlify.app.Tips.If your slides are generated with v-for, use key worths that are based upon the information you are actually looping with. Simply put, carry out v-for=" slide in slides": key=' slide.id' somewhat that v-for=" slide, index in slides": trick=' mark'.Don't make use of v-if on the origin factor of slide components.API.Props.Slots.Slots.Description.nonpayment.Where your slides obtain administered.back-arrow.Replace the default back icon. Port props:.handicapped - Real if at first webpage when certainly not knotting.next-arrow.Switch out the nonpayment next icon. Port props:.disabled - Real if at last web page when certainly not looping.dot.Substitute the default pagination dots. Slot props:.mark - The webpage mark that the dot embodies.handicapped - Accurate if dot embodies current page.Techniques.Approaches.Explanation.next().Move forward a page or slide, depending upon the paginate-by-slide prop.back().Return a web page or even slide, relying on the paginate-by-slide set.goto( mark).Go to a mark. If paginate-by-slide is actually inaccurate, this equates to a page countered. If accurate, this relates to a slide countered.Activities.See https://vue-ssr-carousel.netlify.app/events.Occasions.Explanation.improvement( mark ).Discharged when the internal index counter modifications.input.Same as improvement yet planned for make use of along with v-model.press.Shot on mouse or touch down.launch.Fired on mouse or repair.drag: beginning.Shot on beginning of tugging.pain: end.Shot on end of pulling.tween: beginning( mark ).Discharged when the carousel starts tweening to it is actually ultimate position.tween: end( mark ).Axed when the carousel has actually ended up tweening to it is actually destination.