{"id":12606,"library":"vue-tiny-slider","title":"Vue Tiny Slider","description":"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.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/viktorlarsson/vue-tiny-slider","tags":["javascript","vue","tiny-slider","slider","carousel","typescript"],"install":[{"cmd":"npm install vue-tiny-slider","lang":"bash","label":"npm"},{"cmd":"yarn add vue-tiny-slider","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-tiny-slider","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core slider functionality and styling; vue-tiny-slider is a wrapper around this library.","package":"tiny-slider"}],"imports":[{"note":"This component is a default export. Alias it locally as needed, e.g., `components: { 'tiny-slider': VueTinySlider }`.","wrong":"import { VueTinySlider } from 'vue-tiny-slider';\n// OR\nconst VueTinySlider = require('vue-tiny-slider');","symbol":"VueTinySlider","correct":"import VueTinySlider from 'vue-tiny-slider';"},{"note":"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.","wrong":"import 'tiny-slider/dist/tiny-slider.css';","symbol":"Tiny Slider SCSS","correct":"@import 'tiny-slider/src/tiny-slider';"},{"note":"Useful for type-checking when defining slider options programmatically in TypeScript.","symbol":"TinySliderSettings (Type)","correct":"import type { TinySliderSettings } from 'vue-tiny-slider';"}],"quickstart":{"code":"import { createApp, ref, onMounted } from 'vue';\nimport VueTinySlider from 'vue-tiny-slider';\nimport 'tiny-slider/src/tiny-slider.scss'; // Don't forget to import styles!\n\nconst App = {\n components: { 'tiny-slider': VueTinySlider },\n template: `\n
\n
My Awesome Carousel
\n \n
Slider item #1
\n
Slider item #2
\n
Slider item #3
\n
Slider item #4
\n
Slider item #5
\n
Slider item #6
\n \n \n
\n `,\n setup() {\n const mySlider = ref(null);\n\n const goToNextSlide = () => {\n if (mySlider.value && mySlider.value.slider) {\n mySlider.value.slider.goTo('next');\n } else {\n console.warn('Slider instance not available yet.');\n }\n };\n\n // Example of accessing slider info after mount\n onMounted(() => {\n if (mySlider.value && mySlider.value.slider) {\n console.log('Slider initialized:', mySlider.value.slider.getInfo());\n }\n });\n\n return { mySlider, goToNextSlide };\n }\n};\n\ncreateApp(App).mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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.","message":"Major 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.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Wrap the `vue-tiny-slider` component with `` in your templates, and if using Nuxt plugins, suffix the plugin file with `.client.js`.","message":"The 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 `` component.","severity":"gotcha","affected_versions":">=0.1.0"},{"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.","message":"The styling for `tiny-slider` is not bundled with `vue-tiny-slider` and must be imported separately to ensure the slider renders correctly.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For SSR frameworks like Nuxt 3, ensure the component is wrapped within `` tags. If registering globally via a plugin, name the plugin file with a `.client.js` suffix.","cause":"Attempting to render `vue-tiny-slider` in a Server-Side Rendering (SSR) environment without proper client-only hydration.","error":"ReferenceError: document is not defined"},{"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.","cause":"Attempting to access the `slider` instance on the component's ref before the `vue-tiny-slider` component has fully mounted and initialized `tiny-slider`.","error":"TypeError: Cannot read properties of undefined (reading 'slider')"}],"ecosystem":"npm"}