{"id":12580,"library":"vue-slide-up-down","title":"Vue Slide Up Down Transition Component","description":"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.","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/danieldiekmeier/vue-slide-up-down","tags":["javascript","vue","slideup","slidedown","slidetoggle"],"install":[{"cmd":"npm install vue-slide-up-down","lang":"bash","label":"npm"},{"cmd":"yarn add vue-slide-up-down","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-slide-up-down","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for the Vue framework itself.","package":"vue","optional":false}],"imports":[{"note":"Since v3.0.0, the package is ESM-only. CommonJS `require` is not supported. `SlideUpDown` is a default export.","wrong":"const SlideUpDown = require('vue-slide-up-down')","symbol":"SlideUpDown","correct":"import SlideUpDown from 'vue-slide-up-down'"},{"note":"For global registration in Vue 3, use `app.component()` after creating the application instance. Direct `Vue.component` is a Vue 2 pattern.","wrong":"Vue.component('slide-up-down', SlideUpDown)","symbol":"App.component","correct":"import { createApp } from 'vue';\nimport SlideUpDown from 'vue-slide-up-down';\n\nconst app = createApp({ /* ... */ });\napp.component('slide-up-down', SlideUpDown);"},{"note":"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.","wrong":"<slide-up-down active=\"true\"></slide-up-down>","symbol":":active","correct":"<slide-up-down :active=\"myBoolean\"></slide-up-down>"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport SlideUpDown from 'vue-slide-up-down';\n\nconst app = createApp({\n  template: `\n    <div>\n      <button @click=\"toggleActive\">Toggle Content</button>\n      <slide-up-down :active=\"isActive\" :duration=\"800\" class=\"my-slide-transition\">\n        <div v-if=\"isActive\" style=\"padding: 15px; border: 1px solid #eee; background-color: #f9f9f9;\">\n          <h2>Animated Content</h2>\n          <p>This content slides up and down. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, minima?</p>\n          <input type=\"text\" placeholder=\"Interactive element\">\n        </div>\n      </slide-up-down>\n    </div>\n  `,\n  setup() {\n    const isActive = ref(false);\n    const toggleActive = () => {\n      isActive.value = !isActive.value;\n    };\n    return { isActive, toggleActive };\n  }\n});\n\napp.component('slide-up-down', SlideUpDown);\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"Version 3.0.0 dropped support for Vue 2. Applications using Vue 2 must remain on `vue-slide-up-down@2`.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"Version 3.0.0 switched to ESM-only builds, removing the `microbundle` step. This means CommonJS `require()` is no longer supported.","severity":"breaking","affected_versions":">=3.0.0"},{"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.","message":"In 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.","severity":"breaking","affected_versions":">=2.0.0 <3.0.0"},{"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.","message":"Setting 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.","severity":"gotcha","affected_versions":">=1.7.0"},{"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); }`","message":"To apply a custom `transition-timing-function`, it must be specified via CSS on the `slide-up-down` component itself, not as a prop.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `const SlideUpDown = require('vue-slide-up-down');` to `import SlideUpDown from 'vue-slide-up-down';` and ensure your build environment supports ESM.","cause":"Attempting to use `require()` for an ESM-only package or incorrect import syntax.","error":"TypeError: vue_slide_up_down_1.default is not a constructor"},{"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.","cause":"The component was not registered globally or locally within the Vue application.","error":"Failed to resolve component: slide-up-down"},{"fix":"Always bind a boolean value to the `active` prop, e.g., `:active=\"someBooleanData\"`. This prop is mandatory for the component's functionality.","cause":"The `active` prop was either not provided or was provided with an `undefined` value.","error":"The 'active' prop is required but its value is undefined."}],"ecosystem":"npm"}