vue-truncate-read-more

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
• Usage
  • Global Registration
  • Local Registration
• Contributing
• License

Demo link

Stack Blitz Demo

Documentation

Documentation

Installation

npm install vue-truncate-read-more

or

yarn add vue-truncate-read-more

Usage

Global Registration

In your main.js file:

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:

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:

<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:

<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:

<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