Vue3 Slide Up Down


For the NPM users out there:

npm i vue3-slide-up-down

or Yarn users:

yarn add vue3-slide-up-down


There’s no installation required, so just import the component where you want to use it:

2 <Vue3SlideUpDown v-model="show">
3 Hello Foobar
4 </Vue3SlideUpDown>
7<script setup>
8import { ref } from "vue";
9import { Vue3SlideUpDown } from "vue3-slide-up-down";
11const show = ref(true);

Component Props

modelValueBooleanfalseWhether the content inside is visible or not
durationNumber500The time in ms that the open/close animation lasts for
timingFunctionStringease-in-outThe CSS ease function that will be used for both opening and closing transitions
timingFunctionEnterStringnullThe CSS ease function that will be used when content enters the DOM. When set, this setting overrides ‘timingFunction’
timingFunctionLeaveStringnullThe CSS ease function that will be used when content leaves the DOM. When set, this setting overrides ‘timingFunction’
opacityOpenNumber1The opacity of the element on the last keyframe of the open/enter transition
opacityClosedNumber0The opacity of the element on the first keyframe of the close/leave transition
tagStringdivThe HTML element to use for the wrapping container

Note: Any other attributes that you pass to the component will be passed through to the wrapper element. You should, however, avoid adding any paddings or margins to this element since they can cause unexpected results.


Event NameParametersDescription
update:modelValue($event) => {}The v-model state of the component, should be either true or false
open-startnoneEmitted when the open/enter animation begins
open-endnoneEmitted when the open/enter animation finishes
close-startnoneEmitted when the close/leave animation begins
close-endnoneEmitted when the close/leave animation finishes

Migration from v1

A few changes were made to bring the package into line with current best practices and to eliminate some complexity from the component.

(1) The component is no longer the default export and instead a named export. Change your imports like so:

// version 1
import SlideUpDown from 'vue3-slide-up-down';
// version 2
import { Vue3SlideUpDown } from "vue3-slide-up-down";

The responsive prop and functionality have been dropped from this version since it added unnecessary overhead for a feature that wasn’t used in 99.9% of cases. Element height is no longer tracked once the animation is complete and any content changes will be handled by the browser normally.

Suggestions / Comments

These can be posted to the project’s GitHub repository. Issues to the issues, comments to the discussions.

Part of evoMark's contribution to Free and Open Source Software (FOSS)

To read more about evoMark and our open-source software, head to our Open-Source Software page

npm i vue3-slide-up-down