{"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,"search_vec":"'3':40 '3.0.0':33 'access':116 'activ':71 'allow':97 'also':89 'anim':16,94 'api':68 'applic':124 'attribut':87 'cadenc':48 'communiti':60 'compat':37,54 'complex':106 'compon':6,14 'content':120 'contribut':61 'control':78,102 'current':29 'custom':75 'declar':67 'detail':91 'differenti':63 'driven':52 'durat':76 'effect':24 'emit':90 'event':92 'fine':100 'fine-grain':99 'focus':110 'found':25 'full':36 'grain':101 'height':17 'hidden':86 'html':82 'includ':64 'integr':104 'isn':43 'javascript':125 'jqueri':27 'key':62 'librari':109 'lifecycl':95 'major':56 'mimick':19 'offer':35 'primarili':51 'prop':72 'provid':11,112 'releas':47 'robust':114 'simpl':66 'slide':2,8 'slidedown':23,128 'slidetoggl':129 'slideup':21,127 'solut':117 'stabl':30 'stage':96 'strict':46 'support':73 'tag':83 'transit':5,18,121 'ui':107 'updat':49 'version':31,58 'vertic':119 'via':69 'vue':1,7,13,39,57,123,126 'within':122 'wrapper':81","created_at":"2026-04-19T13:43:55.093597+00:00","updated_at":"2026-04-19T13:43:55.093597+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/danieldiekmeier/vue-slide-up-down","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-slide-up-down","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}