<vue-clamp>

Clamping multiline contents with ease.

GitHub →

# Features

# Demo

tag-0 tag-87 tag-174 tag-261 tag-348 tag-435 tag-522 tag-609 tag-696 tag-783 tag-870 tag-957 tag-1044 tag-1131 tag-1218 tag-1305 tag-1392 tag-1479 tag-1566 tag-1653 tag-1740 tag-1827 tag-1914 tag-2001 tag-2088 tag-2175 tag-2262 tag-2349 tag-2436 tag-2523 tag-2610 tag-2697 tag-2784 tag-2871 tag-2958 tag-3045 tag-3132 tag-3219 tag-3306 tag-3393
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with…
Featured Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.
Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Clamped: No

# Usage 

$ npm i --save @boyuai/vue-clamp

For project based on webpack, import will load the untranspiled ES Module version. Please make sure to add the correct config according to following instructions.

Vue CLI v3

For projects created with Vue CLI 3, remember to add @boyuai/vue-clamp and resize-detector into the transpileDependencies option in vue.config.js: 

module.exports = {
  transpileDependencies: ['@boyuai/vue-clamp', 'resize-detector']
}

Vue CLI v2

For Vue CLI 2 with the webpack template, modify build/webpack.base.conf.js like this: 

      {
        test: /\.js$/,
        loader: 'babel-loader',
-       include: [resolve('src'), resolve('test')]
+       include: [
+         resolve('src'),
+         resolve('test'),
+         resolve('node_modules/@boyuai/vue-clamp'),
+         resolve('node_modules/resize-detector')
+       ]
      }

Nuxt.js v2

When using in Nuxt.js, remember to add @boyuai/vue-clamp and resize-detector into the build.transpile option in nuxt.config.js: 

module.exports = {
  build: {
    transpile: ['@boyuai/vue-clamp', 'resize-detector']
  }
}

<template>
<v-clamp autoresize :max-lines="3">{{ text }}</v-clamp>
</template>

<script>
import VClamp from '@boyuai/vue-clamp'

export default {
  components: {
    VClamp
  },
  data () {
    return {
      text: 'Some very very long text content.'
    }
  }
}
</script>

# API