Getting Started with Vue

Scrollable and draggable carousels in your Vue or Nuxt app in seconds.

Installation

Add the blossom-carousel package to your project.

npm install @blossom-carousel/vue

Then, add the component to your Vue app.

import { BlossomCarousel } from '@blossom-carousel/vue';
import '@blossom-carousel/core/style.css';

const app = createApp({});
app.component('BlossomCarousel', BlossomCarousel);

Or Nuxt app.

// plugins/blossom-carousel.js

import { BlossomCarousel } from '@blossom-carousel/vue';
import '@blossom-carousel/core/style.css';

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.vueApp.component('BlossomCarousel', BlossomCarousel);
});

Usage

<BlossomCarousel>
  <div v-for="i in 12">Slide {{ i }}</div>
</BlossomCarousel>

as

Define the HTMLElement of the carousel root.

<BlossomCarousel as="ul">
  <li v-for="i in 12">Slide {{ i }}</li>
</BlossomCarousel>

Renders as

<ul>
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  ...
</ul>