Registry / web-framework / vue-height-collapsible

vue-height-collapsible

library0.1.1jsnpmunverified

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.

web-framework

npm install vue-height-collapsible

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-HEIGHT-COLLAPS

vue-height-collapsible

web-frameworkjavascriptv0.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

HeightCollapsible

✓ import HeightCollapsible from 'vue-height-collapsible'

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

This import path is specifically for Vue 2 applications.

HeightCollapsible (Vue 3)

✓ import HeightCollapsible from 'vue-height-collapsible/vue3'

✗ import HeightCollapsible from 'vue-height-collapsible'

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.

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>

Debug

Known issues

gotchaThe `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" ...>`.

affects: >=0.0.1

breakingThe 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'`.

affects: >=0.0.1

gotchaAs 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 }`.

affects: >=0.0.1

Errors

Common errors & fixes

[Vue warn]: Failed to resolve component: HeightCollapsible

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

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.

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.

Upgrade

Version history

0.1.1latest on npm

Audit

Dependencies

vuerequiredPeer dependency required for the Vue component to function. Supports Vue 2.6.x and 3.x.x.

Agent activity

8 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/kunukn/vue-height-collapsible ↗

packagehttps://www.npmjs.com/package/vue-height-collapsible ↗