Vue.js Read-More

Read-More is a simple plugin fo vue.js that has been created with ❤️ by a bored developer.

Examples

For examples, refer to the demo page.

NPM

 npm install vue-read-more --save

Features!

• Add read more length
• Add read more link
• Custom read more string
• Custom read less string

Usage

 import ReadMore from 'vue-read-more';
 
 Vue.use(ReadMore);

Sample

You can use either the Component approach or the Directive approach.

Component

<template>
  <div class="hello">
    <read-more more-str="read more" :text="msg" link="#" less-str="read less" :max-chars="50"></read-more>
    <read-more more-str="read more" less-str="read less" :text="msg2" link="#"></read-more>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
      msg2: 'Lorem ipsum dolor sit amet'
    }
  }
}
</script>

Directive

Note: When using the directive approach, you will always have lessStr after clicking the read more and you can't modify the moreStr and the lessStr unless you will use the Component approach.

<template>
  <div class="hello">
    <div v-readMore:25="msg"></div>
    <div v-readMore:100="msg2"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.',
      msg2: 'Lorem ipsum dolor sit amet'
    }
  }
}
</script>

Using Options

All read more options were converted to props to be able use them in the vue-read-more component.

Usage

<read-more more-str="read more" :text="msg" link="#" less-str="read less" :max-chars="50"></read-more>

API

Note: When you didn't pass something in the lessStr, after clicking the read more you wouldn't have a read less link.

License

MIT

Use at your own risk! with ❤️ by Lyor