.An efficiency concentrated Vue slide carousel made for SSR/SSG environments. No JS is actually utilized to layout the carousel or it is actually slides. The objective is actually to enhance LCP as well as CLS scores considering that there is actually no style or markup improvements when JS hydates. It is actually mostly designed for leaving "memory card" design slides (like for connecting to articles or even items) where the carousel-ness is actually conditionally used based upon the lot of memory cards that are slotted in along with the viewport width.Take a look at the demo: https://vue-ssr-carousel.netlify.app.Mount.anecdote add vue-ssr-carousel.Nonpayment.bring in 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 examples, view the demonstration: https://vue-ssr-carousel.netlify.app.Tips.If your slides are produced with v-for, utilize crucial market values that are actually based on the data you are looping through. To put it simply, do v-for=" slide in slides": secret=' slide.id' rather that v-for=" slide, index in slides": secret=' mark'.Don't make use of v-if on the root element of slide parts.API.Props.Slots.Slots.Description.default.Where your slides receive infused.back-arrow.Replace the nonpayment back icon. Port props:.disabled - Real if at first web page when certainly not knotting.next-arrow.Change the default upcoming icon. Port props:.impaired - Real if at last webpage when not looping.dot.Substitute the default pagination dots. Port props:.mark - The webpage index that the dot represents.impaired - True if dot works with current web page.Approaches.Strategies.Explanation.following().Move forward a webpage or even slide, relying on the paginate-by-slide uphold.back().Return a web page or even slide, depending upon the paginate-by-slide prop.goto( mark).Head to an index. If paginate-by-slide is misleading, this corresponds to a web page offset. If true, this corresponds to a slide offset.Celebrations.See https://vue-ssr-carousel.netlify.app/events.Celebrations.Explanation.modification( index ).Fired when the inner index counter improvements.input.Like modification yet planned for use along with v-model.press.Fired on computer mouse or contact down.launch.Fired on computer mouse or even touch up.nuisance: begin.Shot on begin of dragging.pain: end.Fired on end of pulling.tween: begin( index ).Discharged when the slide carousel starts tweening to it's last placement.tween: edge( mark ).Axed when the carousel has completed tweening to it's location.