Vue Height Collapsible

0.1.1 · active · verified Sun Apr 19

Vue HeightCollapsible is a UI component library offering a flexible and accessible collapsible content area for Vue.js applications. Currently at version 0.1.1, it provides a `HeightCollapsible` component that leverages CSS transitions for smooth expand/collapse animations, distinguishing itself by automatically handling elements with variable and dynamic heights. It supports both Vue 2 (2.6.x) and Vue 3 simultaneously through distinct import paths, making it versatile for projects migrating or supporting both ecosystems. While the release cadence isn't explicitly defined, its low version number suggests it may be a utility that receives updates as needed rather than on a fixed schedule. A key differentiator is its reliance on custom CSS for the transition properties, giving developers full control over the animation timing and curve, rather than embedding these styles directly.

Common errors

```
[Vue warn]: Failed to resolve component: HeightCollapsible
```
cause The `HeightCollapsible` component was used in a template but not properly imported and registered in the parent component's `components` option.

fix Import `HeightCollapsible` and include it in the `components` object of your Vue component (e.g., `components: { HeightCollapsible }`).
```
TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
```
cause This error typically occurs when attempting to use the Vue 2 import path (`vue-height-collapsible`) within a Vue 3 project, or vice-versa, causing compatibility issues with Vue's internal APIs.

fix Verify your Vue version and use the correct import path: `import HeightCollapsible from 'vue-height-collapsible'` for Vue 2, or `import HeightCollapsible from 'vue-height-collapsible/vue3'` for Vue 3.
```
Collapsible content appears/disappears instantly without any animation.
```
cause The required CSS `transition` property for the `[data-height-collapsible]` element (or via the `transition` prop) has not been applied, preventing the browser from animating the height changes.

fix Add the essential CSS transition to your stylesheet: `<style> [data-height-collapsible] { transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1); } </style>`, or use the `transition` prop on the component.

Warnings

gotcha The `HeightCollapsible` component **requires** a CSS `transition` property to be defined on its element (or via the `transition` prop) to enable animation. Without it, the content will simply appear and disappear instantly, lacking the smooth collapse effect.
Fix: Add a CSS rule like `[data-height-collapsible] { transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1); }` to your stylesheet or pass a `transition` prop to the component, e.g., `<HeightCollapsible transition="height 300ms ease-in-out" ...>`.
breaking The package uses different import paths for Vue 2 and Vue 3 compatibility. Using the incorrect path for your Vue version will lead to component resolution errors or runtime failures.
Fix: For Vue 2, use `import HeightCollapsible from 'vue-height-collapsible'`. For Vue 3, use `import HeightCollapsible from 'vue-height-collapsible/vue3'`.
gotcha As a Vue component, `HeightCollapsible` must be properly registered in your application. If it's not imported and declared in the `components` option of its parent, Vue will not be able to resolve it, leading to a 'Failed to resolve component' warning.
Fix: Ensure you `import HeightCollapsible from '...' ` and then add it to your component's `components` object: `components: { HeightCollapsible }`.

Install

npm install vue-height-collapsible npm
yarn add vue-height-collapsible yarn
pnpm add vue-height-collapsible pnpm

Imports

HeightCollapsible

wrong:

const HeightCollapsible = require('vue-height-collapsible')

correct:

import HeightCollapsible from 'vue-height-collapsible'

This import path is specifically for Vue 2 applications.

HeightCollapsible (Vue 3)
wrong:
```
import HeightCollapsible from 'vue-height-collapsible'
```
correct:
```
import HeightCollapsible from 'vue-height-collapsible/vue3'
```
This dedicated import path is required for Vue 3 applications. Using the Vue 2 path in a Vue 3 project will lead to runtime errors.
Transition CSS (Required)
```
<style>
  [data-height-collapsible] {
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }
</style>
```
The component requires a CSS transition definition to enable animation. This can be in your stylesheet or via the `transition` prop. Without it, content will appear/disappear instantly.

Quickstart

This example demonstrates how to integrate `HeightCollapsible` into a Vue 3 component, toggle its state with a button, display its internal collapse state, and apply the required CSS transition for animation. It also includes basic ARIA attributes for accessibility.

<template>
  <div class="my-component">
    <button @click="isOpen = !isOpen" :aria-expanded="isOpen" aria-controls="my-collapsible-1">
      <span>Toggle {{ collapseState }}</span>
    </button>
    <HeightCollapsible
      :isOpen="isOpen"
      @update="onUpdate"
      v-slot="{ state }"
      id="my-collapsible-1"
    >
      <p>I know the collapse state: {{ state }}</p>
      <p>Paragraph of text.</p>
      <p>Another paragraph is also OK.</p>
      <p>Images and any other content are ok too.</p>
    </HeightCollapsible>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HeightCollapsible from 'vue-height-collapsible/vue3'; // Assuming Vue 3 context

export default defineComponent({
  name: 'MyComponent',
  components: {
    HeightCollapsible,
  },
  data() {
    return {
      isOpen: true,
      collapseState: '' as string,
    };
  },
  methods: {
    onUpdate({ state }: { state: string }) {
      this.collapseState = state;
    },
  },
});
</script>

<style>
/* Essential for animation */
[data-height-collapsible] {
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Add any other styling as needed */
.my-component {
  border: 1px solid #eee;
  padding: 1rem;
  margin-top: 1rem;
}
button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 4px;
}
button:hover {
  background-color: #0056b3;
}
</style>

view raw JSON →