@rozie-ui/embla-vue

@rozie-ui/embla-vue

Idiomatic vue Carousel — a cross-framework carousel compiled from one Rozie source wrapping Embla Carousel (v8). The current snap is two-way bound via selectedIndex; slides come as a slides config array or as default-slot DOM. This package is generated; do not edit src/ by hand.

Declarative-mode slides must carry class="rozie-embla__slide". The component pins Embla's slides option to that exact selector, so unclassed default-slot children are not measured as slides.

Install

npm i @rozie-ui/embla-vue

Peer dependencies: the embla-carousel (^8.6) + embla-carousel-autoplay (^8.6) engine packages + vue. Install them alongside this package.

No engine CSS to import — the carousel skeleton styles (overflow: hidden viewport, flex container, slide sizing) ship scoped inside the component.

Usage

<script setup lang="ts">
import { ref } from 'vue';
import Carousel from '@rozie-ui/embla-vue';

const index = ref(0);
</script>

<template>
  <Carousel
    :slides="['A', 'B', 'C']"
    v-model:selectedIndex="index"
    :loop="true"
    @select="(i) => console.log('snap', i)"
  />
</template>

Props

Events

Imperative handle

Beyond props, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

<script setup>
import { ref } from 'vue';
const carousel = ref();      // template ref
</script>

<template>
  <Carousel ref="carousel" ... />
  <button @click="carousel.scrollNext()">Next</button>
</template>

Slots