vue3-truncate-html

A simple Vue 3 component for HTML text truncation with expand/collapse functionality.

Key Features

• ✅ Text and HTML truncation - supports both plain text and HTML markup
• ✅ Reactivity - uses v-model for state management
• ✅ Security - HTML sanitization to prevent XSS
• ✅ TypeScript - full TypeScript support
• ✅ Lightweight - minimal dependencies
• ✅ Customizable - multiple options for customization

Quick Start

Installation

npm install vue3-truncate-html

or

yarn add vue3-truncate-html

or

pnpm add vue3-truncate-html

Basic Usage

<template>
  <vue-truncate-html
    v-model="isTruncated"
    :text="text"
    :length="100" />
</template>

<script setup>
import { ref } from 'vue'
import { VueTruncateHtml } from 'vue3-truncate-html'

const isTruncated = ref(true)
const text = 'Very long text that needs to be truncated...'
</script>

Examples

Простой текст

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi autem beatae consectetur co

HTML содержимое

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <ul> <li>Первый пункт списка</li> <li>Второй

Documentation

• 📖 Getting Started - detailed installation and usage guide
• 📚 API - complete description of all props, events and slots
• 🧪 Testing - library testing guide
• 🚀 Release Process - automated release process
• 🛡️ Branch Protection - mandatory PR checks setup

Support

• 🐛 Report a Bug
• 💡 Suggest Enhancement
• 📦 NPM Package

License

MIT © Ivan Monastyrev