Integration - Vue

This package provides a Vue wrapper component for the Tiny Carousel.

To learn on how to install and use plugin, please see our usage guide or look into an example Vue app in the Tiny Carousel Vue repository.

This integration supports both Vue 2 & 3.

Global API

definePlugin

• Arguments:

  Same as carousel.use.

• Returns: [plugin: PluginDefinition, options: PluginOptions]

• Usage:

  Method used to properly format plugin configuration array before passing it to the TinyCarousel component. Add stricter TypeScript typings. Second argument (option) is dependent on the plugin you`re trying to use.

Components

TinyCarousel

• Props:

  • {string} tag = "ul"
  • {PluginsProp} plugins = []
  • {Config} config

• Events:

  To add event emission you need to use Plugin Custom Events. All custom events can be handled with use of v-bind directive, directly on the TinyCarousel component element. For reference please see the advanced example in our usage guide (especially HTML tab).

• Details:

  Component added by Vue integration. Creates single TinyCarousel instance with tag name, plugins and configuration passed as a props. Change of the slotted children or any of the props would lead to TinyCarousel’s reinitialization.

  Additional API can be reached by using ref as can be seen in the example.

Options

TinyCarouselComponent

• Details:

  Data type describing TinyCarousel component. Use it to add the proper type to the carousel ref.