{"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,"search_vec":"'0.1.1':25 '2':54 '2.6':55 '3':59 'access':15 'accordion':136 'anim':38,123 'applic':21 'area':18 'automat':42 'cadenc':78 'collaps':3,16,135 'compon':9,30 'content':17 'control':120 'css':33,112,137 'current':22 'curv':126 'custom':111 'defin':82 'develop':118 'differenti':106 'direct':132 'distinct':62 'distinguish':39 'dynam':48 'ecosystem':74 'element':44 'embed':129 'expand/collapse':37 'explicit':81 'fix':102 'flexibl':13 'full':119 'give':117 'handl':43 'height':2,49 'heightcollaps':5,29 'import':63 'isn':79 'javascript':133 'key':105 'leverag':32 'librari':10,139 'low':84 'make':65 'may':89 'migrat':70 'need':97 'number':86 'offer':11 'path':64 'project':69 'properti':116 'provid':27 'rather':98,127 'receiv':94 'releas':77 'relianc':109 'schedul':103 'simultan':60 'smooth':36 'style':131 'suggest':87 'support':51,72 'time':124 'transit':34,115,138 'typescript':140 'ui':8 'updat':95 'util':92 'variabl':46 'versatil':67 'version':24,85 'vue':1,4,53,58,134 'vue.js':20 'x':56","created_at":"2026-04-19T13:43:26.491243+00:00","updated_at":"2026-04-19T13:43:26.491243+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/kunukn/vue-height-collapsible","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-height-collapsible","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}