diff --git a/.husky/pre-commit b/.husky/pre-commit
index 98475b50..acd310a4 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1 +1,2 @@
+pnpm lint
 pnpm test
diff --git a/docs/examples/ExampleActiveClasses.vue b/docs/examples/ExampleActiveClasses.vue
index bb126dd4..bdd6cbe3 100644
--- a/docs/examples/ExampleActiveClasses.vue
+++ b/docs/examples/ExampleActiveClasses.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Carousel, Pagination, Navigation, Slide } from '../../dist/carousel.es'
+import { Carousel, Navigation, Slide } from '../../dist/carousel.es'
 import '../../dist/carousel.css'
 
 const config = {
@@ -24,7 +24,7 @@ const config = {
 
 <style scoped>
 .carousel__slide {
-  padding: 5;
+  padding: 5px;
 }
 
 .carousel__viewport {
diff --git a/src/components/Carousel/Carousel.ts b/src/components/Carousel/Carousel.ts
index b3ac8bab..2e3034af 100644
--- a/src/components/Carousel/Carousel.ts
+++ b/src/components/Carousel/Carousel.ts
@@ -8,7 +8,6 @@ import {
   computed,
   h,
   watch,
-  cloneVNode,
   VNode,
   SetupContext,
   Ref,
@@ -16,6 +15,8 @@ import {
   ComponentInternalInstance,
   watchEffect,
   shallowReactive,
+  pushScopeId,
+  popScopeId,
 } from 'vue'
 
 import { ARIA as ARIAComponent } from '@/components/ARIA'
@@ -35,6 +36,7 @@ import {
   mapNumberToRange,
   getScrolledIndex,
   getTransformValues,
+  createCloneSlides,
 } from '@/utils'
 
 import {
@@ -74,8 +76,6 @@ export const Carousel = defineComponent({
     // current active config
     const config = reactive<CarouselConfig>({ ...fallbackConfig.value })
 
-    watch(fallbackConfig, () => Object.assign(config, fallbackConfig.value))
-
     // slides
     const currentSlideIndex = ref(props.modelValue ?? 0)
     const prevSlideIndex = ref(0)
@@ -118,29 +118,38 @@ export const Carousel = defineComponent({
     const isReversed = computed(() => ['rtl', 'btt'].includes(normalizedDir.value))
     const isVertical = computed(() => ['ttb', 'btt'].includes(normalizedDir.value))
 
-    const clonedSlidesCount = computed(() => config.itemsToShow + 1)
+    const clonedSlidesCount = computed(() => Math.ceil(config.itemsToShow) + 1)
 
     function updateBreakpointsConfig(): void {
       // Determine the width source based on the 'breakpointMode' config
       const widthSource =
-        (config.breakpointMode === 'carousel'
+        (fallbackConfig.value.breakpointMode === 'carousel'
           ? root.value?.getBoundingClientRect().width
-          : window.innerWidth) || 0
+          : typeof window !== 'undefined'
+            ? window.innerWidth
+            : 0) || 0
 
       const breakpointsArray = Object.keys(props.breakpoints || {})
         .map((key) => Number(key))
         .sort((a, b) => +b - +a)
 
-      let newConfig = { ...fallbackConfig.value } as CarouselConfig
+      const newConfig: Partial<CarouselConfig> = {}
       breakpointsArray.some((breakpoint) => {
         if (widthSource >= breakpoint) {
-          newConfig = { ...newConfig, ...props.breakpoints?.[breakpoint] }
+          Object.assign(newConfig, props.breakpoints![breakpoint])
+          if (newConfig.i18n) {
+            Object.assign(
+              newConfig.i18n,
+              fallbackConfig.value.i18n,
+              props.breakpoints![breakpoint].i18n
+            )
+          }
           return true
         }
         return false
       })
 
-      Object.assign(config, newConfig)
+      Object.assign(config, fallbackConfig.value, newConfig)
     }
 
     const handleResize = throttle(() => {
@@ -171,7 +180,7 @@ export const Carousel = defineComponent({
         if (config.height !== 'auto') {
           const height =
             typeof config.height === 'string' && isNaN(parseInt(config.height))
-                ? viewport.value.getBoundingClientRect().height
+              ? viewport.value.getBoundingClientRect().height
               : parseInt(config.height as string)
 
           slideSize.value = (height - totalGap.value) / config.itemsToShow
@@ -227,8 +236,11 @@ export const Carousel = defineComponent({
       }
     }
 
+    updateBreakpointsConfig()
     onMounted((): void => {
-      updateBreakpointsConfig()
+      if (fallbackConfig.value.breakpointMode === 'carousel') {
+        updateBreakpointsConfig()
+      }
       initAutoplay()
 
       if (document) {
@@ -563,7 +575,7 @@ export const Carousel = defineComponent({
 
     // Update the carousel on props change
     watch(
-      () => props.breakpoints,
+      () => [fallbackConfig.value, props.breakpoints],
       () => updateBreakpointsConfig(),
       { deep: true }
     )
@@ -650,6 +662,7 @@ export const Carousel = defineComponent({
       const slotAddons = slots.addons
 
       let output: VNode[] | Array<Array<VNode>> = slotSlides?.(data) || []
+
       if (!config.enabled || !output.length) {
         return h(
           'section',
@@ -664,22 +677,14 @@ export const Carousel = defineComponent({
       const addonsElements = slotAddons?.(data) || []
 
       if (config.wrapAround) {
-        const toShow = Math.ceil(clonedSlidesCount.value)
-        const slidesBefore = slides.slice(-toShow).map(({ vnode }, index: number) =>
-          cloneVNode(vnode, {
-            index: -slides.length + toShow + index,
-            isClone: true,
-            key: `clone-before-${String(vnode.key)}`,
-          })
-        )
-        const slidesAfter = slides.slice(0, toShow).map(({ vnode }, index: number) =>
-          cloneVNode(vnode, {
-            index: slides.length + index,
-            isClone: true,
-            key: `clone-after-${String(vnode.key)}`,
-          })
-        )
-        output = [slidesBefore, output, slidesAfter]
+        // Ensure scoped CSS tracks properly
+        const scopeId = output.length > 0 ? output[0].scopeId : null
+        pushScopeId(scopeId)
+        const toShow = clonedSlidesCount.value
+        const slidesBefore = createCloneSlides({ slides, position: 'before', toShow })
+        const slidesAfter = createCloneSlides({ slides, position: 'after', toShow })
+        popScopeId()
+        output = [...slidesBefore, ...output, ...slidesAfter]
       }
 
       const trackEl = h(
diff --git a/src/components/Slide/Slide.ts b/src/components/Slide/Slide.ts
index fe0b0005..7112d650 100644
--- a/src/components/Slide/Slide.ts
+++ b/src/components/Slide/Slide.ts
@@ -12,6 +12,8 @@ import {
   useId,
   onMounted,
   VNode,
+  onUpdated,
+  watch,
 } from 'vue'
 
 import { injectCarousel } from '@/injectSymbols'
@@ -43,6 +45,7 @@ export const Slide = defineComponent({
     }
 
     const index = ref(props.index)
+    watch(() => props.index, (i) => index.value = i)
 
     const isActive: ComputedRef<boolean> = computed(
       () => index.value === carousel.currentSlide
@@ -97,6 +100,9 @@ export const Slide = defineComponent({
       onMounted(() => {
         makeUnfocusable(instance.vnode)
       })
+      onUpdated(() => {
+        makeUnfocusable(instance.vnode)
+      })
     }
 
     expose({
diff --git a/src/utils/createCloneSlides.ts b/src/utils/createCloneSlides.ts
new file mode 100644
index 00000000..3b7eaff3
--- /dev/null
+++ b/src/utils/createCloneSlides.ts
@@ -0,0 +1,32 @@
+import { cloneVNode, ComponentInternalInstance, h } from 'vue'
+
+import { Slide } from '@/components/Slide'
+
+type CreateCloneSlidesArgs = {
+  slides: Array<ComponentInternalInstance>
+  position: 'before' | 'after'
+  toShow: number
+}
+
+export function createCloneSlides({ slides, position, toShow }: CreateCloneSlidesArgs) {
+  const clones = []
+  const isBefore = position === 'before'
+  const start = isBefore ? -toShow : 0
+  const end = isBefore ? 0 : toShow
+
+  for (let i = start; i < end; i++) {
+    const index = isBefore ? i : slides.length > 0 ? i + slides.length : i + 99999
+    const props = {
+      index,
+      isClone: true,
+      key: `clone-${position}-${i}`,
+    }
+    clones.push(
+      slides.length > 0
+        ? cloneVNode(slides[(i + slides.length) % slides.length].vnode, props)
+        : h(Slide, props)
+    )
+  }
+
+  return clones
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 35394bc7..d1a098b7 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -6,3 +6,4 @@ export * from './mapNumberToRange'
 export * from './i18nFormatter'
 export * from './throttle'
 export * from './getTransformValues'
+export * from './createCloneSlides'
diff --git a/tests/components/BasicApp.vue b/tests/components/BasicApp.vue
index 9fa45ee9..35cd1fdb 100644
--- a/tests/components/BasicApp.vue
+++ b/tests/components/BasicApp.vue
@@ -4,18 +4,20 @@ import {
   Slide,
   Navigation as CarouselNavigation,
   Pagination as CarouselPagination,
+  Breakpoints,
 } from '@/index'
 
 const { slideNum = 5, itemsToShow = 1 } = defineProps<{
   slideNum?: number
   itemsToShow?: number
   wrapAround?: boolean
+  breakpoints?: Breakpoints
 }>()
 const vModel = defineModel<number>({ default: 0 })
 </script>
 
 <template>
-  <Carousel v-model="vModel" :items-to-show="itemsToShow" :wrap-around="wrapAround">
+  <Carousel v-model="vModel" :items-to-show="itemsToShow" :wrap-around="wrapAround" :breakpoints="breakpoints">
     <Slide v-for="slide in slideNum" :key="slide">
       {{ slide }}
       <input type="text" />
diff --git a/tests/components/SlottedApp.vue b/tests/components/SlottedApp.vue
index 5992e932..29c8bd1a 100644
--- a/tests/components/SlottedApp.vue
+++ b/tests/components/SlottedApp.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import Carousel from './Carousel.vue'
 import Slides from './Slides.vue'
-const { slideNum = 5 } = defineProps<{ slideNum: number }>()
+const { slideNum = 5 } = defineProps<{ slideNum: number, wrapAround?: boolean }>()
 </script>
 
 <template>
-  <Carousel>
+  <Carousel :wrap-around="wrapAround">
     <Slides :slide-num="slideNum"></Slides>
   </Carousel>
 </template>
diff --git a/tests/integration/__snapshots__/carousel.spec.ts.snap b/tests/integration/__snapshots__/carousel.spec.ts.snap
index ac471e33..35582477 100644
--- a/tests/integration/__snapshots__/carousel.spec.ts.snap
+++ b/tests/integration/__snapshots__/carousel.spec.ts.snap
@@ -1,6 +1,67 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Wrap around Carousel.ts > It renders wrapAround correctly 1`] = `
+exports[`SSR Carousel > renders server side properly 1`] = `
+"<div id="app">
+  <section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
+    <div class="carousel__viewport">
+      <ol class="carousel__track" style="transform: translateX(0px);">
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">3 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">4 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">5 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--visible carousel__slide--prev" id="v-0">1 <input type="text"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-1">2 <input type="text"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--visible carousel__slide--next" id="v-2">3 <input type="text"></li>
+        <li style="width: 50%;" class="carousel__slide" id="v-3">4 <input type="text"></li>
+        <li style="width: 50%;" class="carousel__slide" id="v-4">5 <input type="text"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">1 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">2 <input type="text" tabindex="-1"></li>
+        <li style="width: 50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">3 <input type="text" tabindex="-1"></li>
+      </ol>
+    </div><button type="button" class="carousel__prev" aria-label="Navigate to previous slide" title="Navigate to previous slide"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left">
+        <title>Arrow pointing to the left</title>
+        <path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path>
+      </svg></button><button type="button" class="carousel__next" aria-label="Navigate to next slide" title="Navigate to next slide"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the right">
+        <title>Arrow pointing to the right</title>
+        <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path>
+      </svg></button>
+    <ol class="carousel__pagination">
+      <li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 1" aria-pressed="false" aria-controls="v-0" title="Navigate to slide 1"></button></li>
+      <li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button carousel__pagination-button--active" aria-label="Navigate to slide 2" aria-pressed="true" aria-controls="v-1" title="Navigate to slide 2"></button></li>
+      <li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 3" aria-pressed="false" aria-controls="v-2" title="Navigate to slide 3"></button></li>
+      <li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 4" aria-pressed="false" aria-controls="v-3" title="Navigate to slide 4"></button></li>
+      <li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 5" aria-pressed="false" aria-controls="v-4" title="Navigate to slide 5"></button></li>
+    </ol>
+    <div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 2 of 5</div>
+  </section>
+</div>"
+`;
+
+exports[`SSR Carousel > renders server side properly 2`] = `"<div id="app"><section class="carousel is-ltr" style="" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);"><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><!--[--><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--prev" id="v-0">1 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-1">2 <input type="text"></li><li style="width:50%;" class="carousel__slide carousel__slide--visible carousel__slide--next" id="v-2">3 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-3">4 <input type="text"></li><li style="width:50%;" class="carousel__slide" id="v-4">5 <input type="text"></li><!--]--><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:50%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li></ol></div><!--[--><!--[--><button type="button" class="carousel__prev" aria-label="Navigate to previous slide" title="Navigate to previous slide"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the left"><title>Arrow pointing to the left</title><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path></svg></button><button type="button" class="carousel__next" aria-label="Navigate to next slide" title="Navigate to next slide"><svg class="carousel__icon" viewBox="0 0 24 24" role="img" aria-label="Arrow pointing to the right"><title>Arrow pointing to the right</title><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path></svg></button><!--]--><ol class="carousel__pagination"><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 1" aria-pressed="false" aria-controls="v-0" title="Navigate to slide 1"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button carousel__pagination-button--active" aria-label="Navigate to slide 2" aria-pressed="true" aria-controls="v-1" title="Navigate to slide 2"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 3" aria-pressed="false" aria-controls="v-2" title="Navigate to slide 3"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 4" aria-pressed="false" aria-controls="v-3" title="Navigate to slide 4"></button></li><li class="carousel__pagination-item"><button type="button" class="carousel__pagination-button" aria-label="Navigate to slide 5" aria-pressed="false" aria-controls="v-4" title="Navigate to slide 5"></button></li></ol><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 2 of 5</div></section></div>"`;
+
+exports[`SSR Carousel > renders slotted server side properly 1`] = `
+"<div id="app">
+  <section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
+    <div class="carousel__viewport">
+      <ol class="carousel__track" style="transform: translateX(0px);">
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">4</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone carousel__slide--prev" aria-hidden="true">5</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-0">1</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--next" id="v-1">2</li>
+        <li style="width: 100%;" class="carousel__slide" id="v-2">3</li>
+        <li style="width: 100%;" class="carousel__slide" id="v-3">4</li>
+        <li style="width: 100%;" class="carousel__slide" id="v-4">5</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">1</li>
+        <li style="width: 100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true">2</li>
+      </ol>
+    </div>
+    <div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 5</div>
+  </section>
+</div>"
+`;
+
+exports[`SSR Carousel > renders slotted server side properly 2`] = `"<div id="app"><section class="carousel is-ltr" style="" dir="ltr" aria-label="Gallery" tabindex="0"><div class="carousel__viewport"><ol class="carousel__track" style="transform:translateX(0px);"><li style="width:100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:100%;" class="carousel__slide carousel__slide--clone carousel__slide--prev" aria-hidden="true"></li><!--[--><!--[--><li style="width:100%;" class="carousel__slide carousel__slide--visible carousel__slide--active" id="v-0">1</li><li style="width:100%;" class="carousel__slide carousel__slide--next" id="v-1">2</li><li style="width:100%;" class="carousel__slide" id="v-2">3</li><li style="width:100%;" class="carousel__slide" id="v-3">4</li><li style="width:100%;" class="carousel__slide" id="v-4">5</li><!--]--><!--]--><li style="width:100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li><li style="width:100%;" class="carousel__slide carousel__slide--clone" aria-hidden="true"></li></ol></div><!--[--><!--]--><div class="carousel__liveregion carousel__sr-only" aria-live="polite" aria-atomic="true">Item 1 of 5</div></section></div>"`;
+
+exports[`Wrap around Carousel.ts > renders wrapAround correctly 1`] = `
 "<section class="carousel is-ltr" dir="ltr" aria-label="Gallery" tabindex="0">
   <div class="carousel__viewport">
     <ol class="carousel__track" style="transform: translateX(0px);">
diff --git a/tests/integration/carousel.spec.ts b/tests/integration/carousel.spec.ts
index 98923203..0ece246a 100644
--- a/tests/integration/carousel.spec.ts
+++ b/tests/integration/carousel.spec.ts
@@ -1,15 +1,18 @@
 import { mount } from '@vue/test-utils'
-import { expect, it, describe, beforeAll } from 'vitest'
-
+import { expect, it, describe, beforeAll, vi, afterEach } from 'vitest'
+import { Component, createSSRApp, h } from 'vue'
+import { renderToString } from 'vue/server-renderer'
 
 import App from '../components/BasicApp.vue'
 import SlottedApp from '../components/SlottedApp.vue'
 
+import type { ComponentProps } from 'vue-component-type-helpers'
+
 describe('Carousel.ts', () => {
-  let wrapper: any
+  let wrapper: ReturnType<typeof mount<typeof App>>
 
   beforeAll(async () => {
-    wrapper = mount(App, { props: { slideNum: 5 } })
+    wrapper = await mount(App, { props: { slideNum: 5 } })
   })
 
   it('It renders *five* slides correctly', () => {
@@ -29,10 +32,10 @@ describe('Carousel.ts', () => {
 })
 
 describe('Slotted Carousel.ts', () => {
-  let wrapper: any
+  let wrapper: ReturnType<typeof mount<typeof SlottedApp>>
 
   beforeAll(async () => {
-    wrapper = mount(SlottedApp, { props: { slideNum: 3 } })
+    wrapper = await mount(SlottedApp, { props: { slideNum: 3 } })
   })
 
   it('It renders *three* slides correctly', () => {
@@ -52,15 +55,104 @@ describe('Slotted Carousel.ts', () => {
 })
 
 describe('Wrap around Carousel.ts', () => {
-  let wrapper: any
+  let wrapper: ReturnType<typeof mount<typeof App>>
 
   beforeAll(async () => {
-    wrapper = mount(App, {
+    wrapper = await mount(App, {
       props: { wrapAround: true, itemsToShow: 3, slideNum: 9, modelValue: 8 },
     })
   })
 
-  it('It renders wrapAround correctly', () => {
+  it('renders wrapAround correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})
+
+describe('SSR Carousel', () => {
+  const consoleMock = vi.spyOn(console, 'warn').mockImplementation(() => undefined)
+
+  afterEach(() => {
+    consoleMock.mockReset()
+  })
+
+  const renderSSR = async <T extends Component, P extends ComponentProps<T>>(
+    component: T,
+    props: P = {}
+  ) => {
+    const comp = {
+      render() {
+        return h('div', { id: 'app' }, h(component, props))
+      },
+    }
+    // Simulate a SSR env where there is no window or document
+    const windowBackup = window
+    const documentBackup = document
+    Object.defineProperty(global, 'window', {
+      value: undefined,
+      enumerable: true,
+      writable: false,
+    })
+    const app = createSSRApp(comp)
+    const html = await renderToString(app)
+
+    Object.defineProperty(global, 'window', {
+      value: windowBackup,
+      enumerable: true,
+      writable: false,
+    })
+    Object.defineProperty(global, 'document', {
+      value: documentBackup,
+      enumerable: true,
+      writable: false,
+    })
+    Object.defineProperty(global.window, 'innerWidth', { value: 700 })
+    document.body.innerHTML = html
+    const wrapper = await mount(comp, { attachTo: '#app' })
+    return [html, wrapper]
+  }
+
+  it('renders server side properly', async () => {
+    const [html, wrapper] = await renderSSR(App, {
+      wrapAround: true,
+      modelValue: 1,
+      itemsToShow: 2,
+    })
+
+    expect(consoleMock).not.toHaveBeenCalled()
+    expect(wrapper.html()).toMatchSnapshot()
+    expect(html).toMatchSnapshot()
+  })
+
+  it('renders slotted server side properly', async () => {
+    const [html, wrapper] = await renderSSR(SlottedApp, {
+      wrapAround: true,
+      slideNum: 5,
+    })
+
+    expect(consoleMock).not.toHaveBeenCalled()
     expect(wrapper.html()).toMatchSnapshot()
+    expect(html).toMatchSnapshot()
+  })
+
+  it("doesn't get hydration mismatch with breakpoints", async () => {
+    const [html, wrapper] = await renderSSR(App, {
+      wrapAround: true,
+      breakpoints: {
+        600: {
+          itemsToShow: 3,
+        },
+      },
+      modelValue: 1,
+      itemsToShow: 1,
+    })
+    expect(consoleMock).not.toHaveBeenCalled()
+
+    const slides = wrapper.findAll('.carousel__slide--visible')
+    expect(slides.length).toBe(3)
+
+    const el = document.createElement('div')
+    el.innerHTML = html
+    const slidesSSR = el.querySelectorAll('.carousel__slide--visible')
+    expect(slidesSSR.length).toBe(1)
   })
 })