Framework Guides
Vue and Nuxt
Use Blossom Carousel in Vue and Nuxt apps with local imports or global plugin registration.
Install
pnpm add @blossom-carousel/vue
bun add @blossom-carousel/vue
yarn add @blossom-carousel/vue
npm install @blossom-carousel/vue
Local component usage
<script setup>
import { BlossomCarousel } from "@blossom-carousel/vue";
import "@blossom-carousel/core/style.css";
</script>
<template>
<BlossomCarousel>
<div v-for="i in 12" :key="i">Slide {{ i }}</div>
</BlossomCarousel>
</template>
Nuxt plugin
Register the component globally to use it across the app.
plugins/blossom-carousel.ts
import { BlossomCarousel } from "@blossom-carousel/vue";
import "@blossom-carousel/core/style.css";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("BlossomCarousel", BlossomCarousel);
});
Semantic root element
Use as="ul" for list-like carousels.
<template>
<BlossomCarousel as="ul">
<li v-for="i in 12" :key="i">Slide {{ i }}</li>
</BlossomCarousel>
</template>
Button controls
Navigate the carousel programmatically with prev() and next().
<template>
<BlossomCarousel ref="blossomCarousel">
<div v-for="i in 12" :key="i">Slide {{ i }}</div>
</BlossomCarousel>
<button @click="blossomCarousel.prev()">Previous</button>
<button @click="blossomCarousel.next()">Next</button>
</template>
<script setup>
const blossomCarousel = ref(null);
</script>
Overscroll API
Tap into Blossom's drag engine's overscroll behavior to create your own style.
<template>
<!-- prevent and overwrite Blossom's default rubberbanding effect -->
<BlossomCarousel @overscroll.prevent="onOverscroll">
<div v-for="i in 12" :key="i">Slide {{ i }}</div>
</BlossomCarousel>
</template>
<script setup>
function onOverscroll(event) {
const overScroll = event.detail.left;
Array.from(blossomCarousel.value.children).forEach((slide) => {
slide.style.transform = `scale(${1 - overScroll * 0.1})`;
});
}
</script>