{"id":12491,"library":"vue-height-collapsible","title":"Vue Height Collapsible","description":"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.","status":"active","version":"0.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/kunukn/vue-height-collapsible","tags":["javascript","vue","collapsible","accordion","CSS transition","library","typescript"],"install":[{"cmd":"npm install vue-height-collapsible","lang":"bash","label":"npm"},{"cmd":"yarn add vue-height-collapsible","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-height-collapsible","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for the Vue component to function. Supports Vue 2.6.x and 3.x.x.","package":"vue","optional":false}],"imports":[{"note":"This import path is specifically for Vue 2 applications.","wrong":"const HeightCollapsible = require('vue-height-collapsible')","symbol":"HeightCollapsible","correct":"import HeightCollapsible from 'vue-height-collapsible'"},{"note":"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.","wrong":"import HeightCollapsible from 'vue-height-collapsible'","symbol":"HeightCollapsible (Vue 3)","correct":"import HeightCollapsible from 'vue-height-collapsible/vue3'"},{"note":"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.","symbol":"Transition CSS (Required)","correct":"<style>\n  [data-height-collapsible] {\n    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n</style>"}],"quickstart":{"code":"<template>\n  <div class=\"my-component\">\n    <button @click=\"isOpen = !isOpen\" :aria-expanded=\"isOpen\" aria-controls=\"my-collapsible-1\">\n      <span>Toggle {{ collapseState }}</span>\n    </button>\n    <HeightCollapsible\n      :isOpen=\"isOpen\"\n      @update=\"onUpdate\"\n      v-slot=\"{ state }\"\n      id=\"my-collapsible-1\"\n    >\n      <p>I know the collapse state: {{ state }}</p>\n      <p>Paragraph of text.</p>\n      <p>Another paragraph is also OK.</p>\n      <p>Images and any other content are ok too.</p>\n    </HeightCollapsible>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue';\nimport HeightCollapsible from 'vue-height-collapsible/vue3'; // Assuming Vue 3 context\n\nexport default defineComponent({\n  name: 'MyComponent',\n  components: {\n    HeightCollapsible,\n  },\n  data() {\n    return {\n      isOpen: true,\n      collapseState: '' as string,\n    };\n  },\n  methods: {\n    onUpdate({ state }: { state: string }) {\n      this.collapseState = state;\n    },\n  },\n});\n</script>\n\n<style>\n/* Essential for animation */\n[data-height-collapsible] {\n  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);\n}\n/* Add any other styling as needed */\n.my-component {\n  border: 1px solid #eee;\n  padding: 1rem;\n  margin-top: 1rem;\n}\nbutton {\n  background-color: #007bff;\n  color: white;\n  border: none;\n  padding: 0.5rem 1rem;\n  cursor: pointer;\n  border-radius: 4px;\n}\nbutton:hover {\n  background-color: #0056b3;\n}\n</style>","lang":"typescript","description":"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."},"warnings":[{"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\" ...>`.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"},{"fix":"For Vue 2, use `import HeightCollapsible from 'vue-height-collapsible'`. For Vue 3, use `import HeightCollapsible from 'vue-height-collapsible/vue3'`.","message":"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.","severity":"breaking","affected_versions":">=0.0.1"},{"fix":"Ensure you `import HeightCollapsible from '...' ` and then add it to your component's `components` object: `components: { HeightCollapsible }`.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Import `HeightCollapsible` and include it in the `components` object of your Vue component (e.g., `components: { HeightCollapsible }`).","cause":"The `HeightCollapsible` component was used in a template but not properly imported and registered in the parent component's `components` option.","error":"[Vue warn]: Failed to resolve component: HeightCollapsible"},{"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.","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.","error":"TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function"},{"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.","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.","error":"Collapsible content appears/disappears instantly without any animation."}],"ecosystem":"npm"}