vue-truncate-list

A flexible Vue 2 & Vue 3 component for truncating lists with custom truncator rendering. Designed for both mobile and desktop platforms.

Features

• Automatic truncation: Dynamically hides overflowing list items.
• Custom truncator: Render your own truncator UI (e.g., "+3 more", "Show all").
• Responsive: Works on both mobile and desktop layouts.
• Expandable: Supports expandable/collapsible lists.

Demo

See Live Demo or src/App.vue for usage examples.

Installation

npm install @twheeljs/vue-truncate-list
# or
yarn add @twheeljs/vue-truncate-list

Usage

Basic Example

<template>
  <TruncateList
    :renderTruncator="({ hiddenItemsCount }) => h('div', { class: 'listItem' }, `+${hiddenItemsCount}`)"
  >
    <div class="listItem">Item 1</div>
    <div class="listItem">Item 2</div>
    <div class="listItem">Item 3</div>
    <!-- ... -->
  </TruncateList>
</template>

<script>
import { h } from 'vue'
import TruncateList from './components/TruncateList'

export default {
  components: {
    TruncateList
  }
}
</script>

Note: In this case, setting the 'expanded' class sets max-height to none, but the container's height does not update immediately. This means ResizeObserver will not trigger. Therefore, we need to manually call truncate() in nextTick to ensure the layout is recalculated.

Props

| Name | Type | Default | Description | |-----------------------|-----------------------------------------------------------------------------------------------------------|---------|--------------------------------------------------------------------------------------------------------------------------------------------------| | renderTruncator | ({ hiddenItemsCount, truncate }: { hiddenItemsCount: number, truncate: () => void }) => string \| VNode | - | Function to render the truncator UI. Receives hiddenItemsCount (number of hidden items) and truncate (call to recalculate layout if needed). | | alwaysShowTruncator | boolean | false | Whether to always show the truncator, even when no items are hidden. |

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Getting started

npm install

npm run dev

Commit message

We use commitlint to enforce commit message conventions. Please use the following command to commit:

npm run commit
# or
npx cz

release

We use release-it to release. Please use the following command to release:

npm run release

Credits

Thanks to

• maladr0it/react-truncate-list: for the original design and inspiration

License

MIT