# vue-truncate-read-more

> A Vue.js V3/2 plugin for truncating text with a 'Read More' button to expand the text.

Latest version **1.1.2** (published 2023-05-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-truncate-read-more
pnpm add vue-truncate-read-more
yarn add vue-truncate-read-more
bun add vue-truncate-read-more
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2023-05-15 |
| First published | 2023-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Your Name |
| Maintainers | ergrin |
| Keywords | vue, vue3, plugin, truncate, read-more, clamp, text-clipper, clipper, character-limit |

## Links

- npm: https://www.npmjs.com/package/vue-truncate-read-more
- Repository: https://github.com/EranGrin/vue-read-more-truncate
- Homepage: https://erangrin.github.io/vue-read-more-truncate/#demo
- Issues: https://github.com/EranGrin/vue-read-more-truncate/issues
- npm.io page: https://npm.io/package/vue-truncate-read-more

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.0.0
- [text-clipper](https://npm.io/package/text-clipper.md) ^2.2.0

## Alternatives

- [@mce/gif](https://npm.io/package/@mce/gif.md) — 2.6K weekly downloads
- [cleanse](https://npm.io/package/cleanse.md) — 173 weekly downloads
- [str](https://npm.io/package/str.md) — 127 weekly downloads
- [naming](https://npm.io/package/naming.md) — 95 weekly downloads
- [tap-telco-api](https://npm.io/package/tap-telco-api.md) — 19 weekly downloads

## Recent versions

- 1.1.2 (latest) — 2023-05-15
- 1.1.1 — 2023-05-15
- 1.1.0 — 2023-05-15
- 1.0.6 — 2023-04-17
- 1.0.5 — 2023-04-17
- 1.0.4 — 2023-04-17
- 1.0.3 — 2023-04-17
- 1.0.2 — 2023-04-17
- 1.0.1 — 2023-04-17
- 1.0.0 — 2023-04-17

## README

# Vue Truncate Readmore

A Vue.js plugin to truncate and expand text content with a customizable read more/less button.

## Features

- Truncate text content to a specified number of characters
- Display a customizable read more/less button to support multilanguages 
- Activate the plugin based on a minimum character count to prevent truncating short text content
- Smooth auto scrolling to the content when collapsed and outside of the viewport
- Supports Vue 2.x and Vue 3.x JS/TS

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
  - [Global Registration](#global-registration)
  - [Local Registration](#local-registration)
- [Contributing](#contributing)
- [License](#license)

## Demo link
[Stack Blitz Demo](https://stackblitz.com/edit/vue-e4fd7y?file=src/components/TruncateTest.vue)

## Documentation
[Documentation](https://erangrin.github.io/vue-read-more-truncate/#demo)

## Installation

```bash
npm install vue-truncate-read-more
```

or

```bash
yarn add vue-truncate-read-more
```

## Usage

### Global Registration

In your main.js file:

```javascript
import { createApp } from 'vue';
import App from './App.vue';
import TruncateReadMore from 'vue-truncate-read-more';

const app = createApp(App);
app.use(TruncateReadMore);
app.mount('#app');
```

### Local Registration

In your Vue component:

```javascript
import TruncateReadMore from 'vue-truncate-read-more';

export default {
  components: {
    TruncateReadMore
  },
};
```

### Template

Assuming data is coming from the server as HTML with markups

In your Vue component's template:

```html
<truncate-read-more
  :truncate-value="200"
  :only-if-more-than-value="275"
>
  <template #html>
    <div
      v-html="data.html"
    />
  </template>
</truncate-read-more>
```

or in Vue 3.x you can use pascal case:

```html
<TruncateReadMore
  :truncate-value="200"
  :only-if-more-than-value="275"
>
    <template #html>
        <div
        v-html="data.html"
        />
    </template>
</TruncateReadMore>
```

### As a Wrapper

You can also use the plugin as a wrapper around your content or any compoenent that render text:

```html
<truncate-read-more
  :truncate-value="200"
  :only-if-more-than-value="275"
>
    <template #html>
        <div>
        <!-- Your long content -->
        </div>
    </template>
</truncate-read-more>
```


## Props

| Prop                  | Type    | Default | Description                                                                                      |
|-----------------------|---------|---------|--------------------------------------------------------------------------------------------------|
| truncateValue         | Number  | null    | The number of characters to truncate the text to.                                                |
| onlyIfMoreThanValue   | Number  | null    | Activate the truncate feature only if the text character count is greater than this value.      |
| readMoreButtonText    | String  | 'Read more' | The text displayed on the read more button.                                                    |
| readLessButtonText    | String  | 'Read less' | The text displayed on the read less button.                                                    |

## Contributing
Contributions are welcome! To contribute to the project, please follow these steps:

Fork the repository
Create a new branch for your feature or bug fix
Make your changes and commit them with a clear message
Push your changes to your fork
Submit a pull request to the main repository
Please make sure to follow the code style and conventions used in the project.

If you find a bug or have a feature request, please open an issue on the repository.

## License
This project is licensed under the MIT License

---
_Source: https://npm.io/package/vue-truncate-read-more · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._