Registry / web-framework / vue-tiny-slider

vue-tiny-slider

library1.1.0jsnpmunverified

Vue Tiny Slider is a Vue.js wrapper component for the vanilla JavaScript `tiny-slider` library by ganlanyuan, designed to provide a lightweight and highly customizable carousel solution. The current stable version, 1.1.0, is built for Vue 3.x applications, while older Vue 2.x projects should use versions 0.1.x. The library differentiates itself by providing a direct and comprehensive exposure of `tiny-slider`'s extensive options as Vue props, along with access to the underlying slider instance's methods via template refs. This approach ensures maximum flexibility and control over the slider's behavior without abstracting away the core `tiny-slider` API. It ships with TypeScript types and includes specific guidance for handling Server-Side Rendering (SSR) environments, particularly with Nuxt 3, addressing potential DOM-related issues.

web-framework

npm install vue-tiny-slider

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-TINY-SLIDER

vue-tiny-slider

web-frameworkjavascriptv1.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueTinySlider

✓ import VueTinySlider from 'vue-tiny-slider';

✗ import { VueTinySlider } from 'vue-tiny-slider'; // OR const VueTinySlider = require('vue-tiny-slider');

This component is a default export. Alias it locally as needed, e.g., `components: { 'tiny-slider': VueTinySlider }`.

Tiny Slider SCSS

✓ @import 'tiny-slider/src/tiny-slider';

✗ import 'tiny-slider/dist/tiny-slider.css';

While importing the compiled CSS works, the README recommends importing the SCSS directly for better integration and customization within a build pipeline. Styling is not bundled with the component and must be imported separately.

TinySliderSettings (Type)

✓ import type { TinySliderSettings } from 'vue-tiny-slider';

Useful for type-checking when defining slider options programmatically in TypeScript.

Demonstrates how to globally register and locally use `vue-tiny-slider`, including passing options as props, importing necessary styles, and accessing underlying `tiny-slider` methods via template refs.

import { createApp, ref, onMounted } from 'vue'; import VueTinySlider from 'vue-tiny-slider'; import 'tiny-slider/src/tiny-slider.scss'; // Don't forget to import styles! const App = { components: { 'tiny-slider': VueTinySlider }, template: ` <div id="app"> <h1>My Awesome Carousel</h1> <tiny-slider :mouse-drag="true" :loop="false" :items="2" :gutter="20" ref="mySlider"> <div>Slider item #1</div> <div>Slider item #2</div> <div>Slider item #3</div> <div>Slider item #4</div> <div>Slider item #5</div> <div>Slider item #6</div> </tiny-slider> <button @click="goToNextSlide">Next Slide</button> </div> `, setup() { const mySlider = ref(null); const goToNextSlide = () => { if (mySlider.value && mySlider.value.slider) { mySlider.value.slider.goTo('next'); } else { console.warn('Slider instance not available yet.'); } }; // Example of accessing slider info after mount onMounted(() => { if (mySlider.value && mySlider.value.slider) { console.log('Slider initialized:', mySlider.value.slider.getInfo()); } }); return { mySlider, goToNextSlide }; } }; createApp(App).mount('#app');

Debug

Known issues

breakingMajor version incompatibility between Vue 2.x and Vue 3.x. Version `^1.0.0` of `vue-tiny-slider` is for Vue 3.x, while `^0.1.x` is for Vue 2.x.

fix

For Vue 2 projects, pin your `vue-tiny-slider` dependency to a `0.1.x` version (e.g., `npm install vue-tiny-slider@^0.1`). For Vue 3, use `^1.0.0` or later.

affects: >=1.0.0

gotchaThe component requires client-side rendering due to `tiny-slider` directly manipulating the DOM. Using it in Server-Side Rendering (SSR) frameworks like Nuxt 3 requires wrapping it in a `<ClientOnly>` component.

fix

Wrap the `vue-tiny-slider` component with `<ClientOnly>` in your templates, and if using Nuxt plugins, suffix the plugin file with `.client.js`.

affects: >=0.1.0

gotchaThe styling for `tiny-slider` is not bundled with `vue-tiny-slider` and must be imported separately to ensure the slider renders correctly.

fix

Include `@import 'tiny-slider/src/tiny-slider';` in your SCSS or `import 'tiny-slider/dist/tiny-slider.css';` in your JavaScript entry point, or link the CDN CSS in your HTML.

affects: >=0.1.0

Errors

Common errors & fixes

ReferenceError: document is not defined

Attempting to render `vue-tiny-slider` in a Server-Side Rendering (SSR) environment without proper client-only hydration.

fix

For SSR frameworks like Nuxt 3, ensure the component is wrapped within `<ClientOnly>` tags. If registering globally via a plugin, name the plugin file with a `.client.js` suffix.

TypeError: Cannot read properties of undefined (reading 'slider')

Attempting to access the `slider` instance on the component's ref before the `vue-tiny-slider` component has fully mounted and initialized `tiny-slider`.

fix

Ensure you access `this.$refs.yourSliderName.slider` (Options API) or `yourSliderRef.value.slider` (Composition API) only after the component is mounted, typically within `onMounted` or a method triggered by user interaction, and add a null check for robustness.

Upgrade

Version history

1.1.0latest on npm

Audit

Dependencies

tiny-sliderrequiredCore slider functionality and styling; vue-tiny-slider is a wrapper around this library.

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/viktorlarsson/vue-tiny-slider ↗

packagehttps://www.npmjs.com/package/vue-tiny-slider ↗