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. demo

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

Détail du package

@twheeljs/vue-truncate-list

readme