Registry / web-framework / vue-slide-up-down

vue-slide-up-down

library3.0.0jsnpmunverified

Vue Slide Up Down provides a Vue component for animating height transitions, mimicking the `slideUp` and `slideDown` effects found in jQuery. The current stable version is 3.0.0, which offers full compatibility with Vue 3. While there isn't a strict release cadence, updates are primarily driven by compatibility with major Vue versions and community contributions. Key differentiators include its simple, declarative API via the `active` prop, support for custom durations, and control over the wrapper HTML tag and the `hidden` attribute. It also emits detailed events for animation lifecycle stages, allowing for fine-grained control and integration into complex UIs. The library focuses on providing a robust and accessible solution for vertical content transitions within Vue applications.

web-framework

npm install vue-slide-up-down

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-SLIDE-UP-DOWN

vue-slide-up-down

web-frameworkjavascriptv3.0.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.

SlideUpDown

✓ import SlideUpDown from 'vue-slide-up-down'

✗ const SlideUpDown = require('vue-slide-up-down')

Since v3.0.0, the package is ESM-only. CommonJS `require` is not supported. `SlideUpDown` is a default export.

App.component

✓ import { createApp } from 'vue'; import SlideUpDown from 'vue-slide-up-down'; const app = createApp({ /* ... */ }); app.component('slide-up-down', SlideUpDown);

✗ Vue.component('slide-up-down', SlideUpDown)

For global registration in Vue 3, use `app.component()` after creating the application instance. Direct `Vue.component` is a Vue 2 pattern.

:active

✓ <slide-up-down :active="myBoolean"></slide-up-down>

✗ <slide-up-down active="true"></slide-up-down>

The `active` prop expects a boolean value. Use `v-bind:` or `:` for binding JavaScript expressions. Passing a string "true" will be truthy, but it's not the correct type binding.

This quickstart demonstrates how to import and globally register `SlideUpDown` in a Vue 3 application. It shows a basic toggle button that controls the visibility of a content block using the component's `active` prop, including dynamic content and an input field to demonstrate accessibility.

import { createApp, ref } from 'vue'; import SlideUpDown from 'vue-slide-up-down'; const app = createApp({ template: ` <div> <button @click="toggleActive">Toggle Content</button> <slide-up-down :active="isActive" :duration="800" class="my-slide-transition"> <div v-if="isActive" style="padding: 15px; border: 1px solid #eee; background-color: #f9f9f9;"> <h2>Animated Content</h2> <p>This content slides up and down. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, minima?</p> <input type="text" placeholder="Interactive element"> </div> </slide-up-down> </div> `, setup() { const isActive = ref(false); const toggleActive = () => { isActive.value = !isActive.value; }; return { isActive, toggleActive }; } }); app.component('slide-up-down', SlideUpDown); app.mount('#app');

Debug

Known issues

breakingVersion 3.0.0 dropped support for Vue 2. Applications using Vue 2 must remain on `vue-slide-up-down@2`.

fix

For Vue 2 projects, install `npm i vue-slide-up-down@2`. For Vue 3 projects, upgrade to `npm i vue-slide-up-down@3`.

affects: >=3.0.0

breakingVersion 3.0.0 switched to ESM-only builds, removing the `microbundle` step. This means CommonJS `require()` is no longer supported.

fix

Ensure your project uses an environment that supports ESM imports (e.g., Vite, webpack with appropriate configuration). Update all `require()` statements to `import` statements.

affects: >=3.0.0

breakingIn v2.0.0, the `hidden` attribute was added to the wrapper element when `active` is false. This might affect styling or JavaScript that relies on the absence of this attribute.

fix

Review CSS selectors and JavaScript logic that targets the `slide-up-down` component. If this behavior is undesired in v3.x, use the `use-hidden` prop.

affects: >=2.0.0 <3.0.0

gotchaSetting the `use-hidden` prop to `false` can create significant accessibility issues, as focusable elements within the visually hidden component may still be accessible via keyboard navigation.

fix

Only set `use-hidden="false"` if absolutely necessary for specific layout requirements (e.g., `min-height` transitions). Always test thoroughly with keyboard navigation and screen readers to ensure an accessible user experience.

affects: >=1.7.0

gotchaTo apply a custom `transition-timing-function`, it must be specified via CSS on the `slide-up-down` component itself, not as a prop.

fix

Add a class to your `<slide-up-down>` component and define the `transition-timing-function` in your CSS, e.g., `.my-slide-transition { transition-timing-function: cubic-bezier(0.195, 1.65, 0.435, -0.6); }`

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: vue_slide_up_down_1.default is not a constructor

Attempting to use `require()` for an ESM-only package or incorrect import syntax.

fix

Change `const SlideUpDown = require('vue-slide-up-down');` to `import SlideUpDown from 'vue-slide-up-down';` and ensure your build environment supports ESM.

Failed to resolve component: slide-up-down

The component was not registered globally or locally within the Vue application.

fix

Ensure `app.component('slide-up-down', SlideUpDown)` is called after `createApp()` and before `app.mount()`, or import and register it locally within your component's `components` option.

The 'active' prop is required but its value is undefined.

The `active` prop was either not provided or was provided with an `undefined` value.

fix

Always bind a boolean value to the `active` prop, e.g., `:active="someBooleanData"`. This prop is mandatory for the component's functionality.

Upgrade

Version history

3.0.0latest on npm

Audit

Dependencies

vuerequiredPeer dependency for the Vue framework itself.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/danieldiekmeier/vue-slide-up-down ↗

packagehttps://www.npmjs.com/package/vue-slide-up-down ↗