vue3-collapser

Vue3 Collapse Component

A simple, customizable and highly performant Vue 3 component for collapsing elements with support for transitions and easings.

Features:

• v-model support for toggle value
• duration and easing options
• optional withOpacity to control the opacity during the collapse transition
• highly performant, uses vue's built-in computed properties and hooks
• clean and modular code structure, easy to extend and customize

It uses the MutationObserver API to observe changes to the target element and updates its height and opacity as needed. It also sets up event listeners for the resize event to ensure the collapsing effect is responsive to window changes.

Installation and usage

npm install vue3-collapse

You can use register it globally like this:

import vue3Collapse from "vue3Collapse";
import App from "./App.vue";
import { createApp } from "vue";

const app = createApp(App);

app.component("vue3-collapse", vue3Collapse);

then use it this in your component: <vue3-collapse />

Alternatively, you can use it directly:

<!-- your-component.vue -->

<template>
  <vue3-collapse v-model="open" />
</template>

<script>
import { defineComponent } from "vue";
import vue3Collapse from "vue3Collapse";

export default defineComponent({
  components: {
    vue3Collapse,
  },
});
</script>

Vue3Collapse uses v-model to toggle its collapsed state :

<vue3-collapse v-model="open"/>.

Props

• modelValue (required): The value to be passed as v-model
• duration (optional): The duration of the animation in milliseconds (defaults to 500ms)
• withOpacity (optional): Whether to include an opacity animation (defaults to true)
• easing (optional): The easing function to be applied to the animation (defaults to linear)

The value of the easing prop can be options (on the left)

Option	Easing function
linear	linear
ease	ease
easeIn	ease-in
easeOut	ease-out
easeInOut	ease-in-out
easeInSine	cubic-bezier(0.12, 0, 0.39, 0)
easeOutSine	cubic-bezier(0.61, 1, 0.88, 1)
easeInOutSine	cubic-bezier(0.37, 0, 0.63, 1)
easeInQuad	cubic-bezier(0.11, 0, 0.5, 0)
easeOutQuad	cubic-bezier(0.5, 1, 0.89, 1)
easeInOutQuad	cubic-bezier(0.45, 0, 0.55, 1)
easeInCubic	cubic-bezier(0.32, 0, 0.67, 0)
easeOutCubic	cubic-bezier(0.33, 1, 0.68, 1)
easeInOutCubic	cubic-bezier(0.65, 0, 0.35, 1)
easeInQuart	cubic-bezier(0.5, 0, 0.75, 0)
easeOutQuart	cubic-bezier(0.25, 1, 0.5, 1)
easeInOutQuart	cubic-bezier(0.76, 0, 0.24, 1)
easeInQuint	cubic-bezier(0.64, 0, 0.78, 0)
easeOutQuint	cubic-bezier(0.22, 1, 0.36, 1)
easeInOutQuint	cubic-bezier(0.83, 0, 0.17, 1)
easeInExpo	cubic-bezier(0.7, 0, 0.84, 0)
easeOutExpo	cubic-bezier(0.16, 1, 0.3, 1)
easeInOutExpo	cubic-bezier(0.87, 0, 0.13, 1)
easeInCirc	cubic-bezier(0.55, 0, 1, 0.45)
easeOutCirc	cubic-bezier(0, 0.55, 0.45, 1)
easeInOutCirc	cubic-bezier(0.85, 0, 0.15, 1)
easeInBack	cubic-bezier(0.36, 0, 0.66, -0.56)
easeOutBack	cubic-bezier(0.34, 1.56, 0.64, 1)
easeInOutBack	cubic-bezier(0.68, -0.6, 0.32, 1.6)