Vue3 Collapse

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">
    <content-to-collapse />
  </vue3-collapse>
</template>

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

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

Browser with CDN

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue3-collapse"></script>

const { createApp } = Vue;
const App = {
  //Component code...
};
const app = createApp(App);
app.component("vue3Collapse", Vue3Collapse);
app.mount("#app");

Vue3Collapse uses v-model to toggle its collapsed state :

<vue3-collapse v-model="open">
    <content-to-collapse />
</vue3-collapse>

##Slot

This component uses slot to the content you want to collapse. Like this:

<vue3-collapse v-model="open">
    <content-to-collapse />
</vue3-collapse>

Props

| Prop | Description | Type | Default | | ---------------------- | ------------------------------------------------------ | ---------------- | ------- | | modelValue (required) | The value to be passed as v-model, should be a boolean | Boolean | N/A | | duration (optional) | The duration of the animation in milliseconds | String Or Number | 500 | | withOpacity (optional) | Whether to include an opacity animation | Boolean | True | | easing (optional) | The easing function to be applied to the animation | String | linear |

Note: The available easing options are listed in a separate table below.

The value of the easing prop can be any of these 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) |