Vue Tiny Slider

Common errors

• ReferenceError: document is not defined

  cause 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')

  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`.
  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.

Warnings

• breaking 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.
  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.
• gotcha 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 `<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`.
• gotcha The 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.

Install

• npm install vue-tiny-slider npm
• yarn add vue-tiny-slider yarn
• pnpm add vue-tiny-slider pnpm

Imports

• VueTinySlider
  wrong:

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

  correct:

  import VueTinySlider from 'vue-tiny-slider';

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

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

  correct:

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

  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.

Quickstart

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');