{"id":15919,"library":"vue-snip","title":"Vue Snip","description":"vue-snip is a Vue.js directive designed for clamping the content of text elements when they exceed a specified number of lines. It offers two primary snipping approaches: CSS-based (for performance) and JavaScript-based (for greater accuracy and control), selectable on a per-element basis to optimize for different scenarios. A key feature is its ability to automatically re-snip content when the element's size changes (e.g., due to window resize) or when reactive data influencing the text content updates, eliminating the need for manual recalculations. The library intelligently determines line heights without requiring explicit specification from the developer. Under the hood, vue-snip leverages the `js-snip` library for its core snipping logic. The current stable version is 2.0.2, and it supports both Vue 2 and Vue 3 environments through distinct installation patterns. While there isn't a stated strict release cadence, updates tend to align with Vue ecosystem changes or enhancements to the underlying snipping logic, focusing on stability and performance for text truncation needs.","status":"active","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/ajobi/vue-snip","tags":["javascript","clamp","ellipsis","snip","snip-text","cut-text","clamp-text","truncate-text","multiline-text","typescript"],"install":[{"cmd":"npm install vue-snip","lang":"bash","label":"npm"},{"cmd":"yarn add vue-snip","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-snip","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue.js projects (supports Vue 2 and Vue 3).","package":"vue","optional":false}],"imports":[{"note":"VueSnip is the default export for the plugin. In Vue 3, it's used with `createApp().use()`.","wrong":"import { VueSnip } from 'vue-snip'; // Incorrect named import\nconst VueSnip = require('vue-snip'); // CJS not typical for Vue 3","symbol":"VueSnip (Vue 3 plugin)","correct":"import VueSnip from 'vue-snip';\ncreateApp(App).use(VueSnip).mount('#app');"},{"note":"VueSnip is the default export for the plugin. In Vue 2, it's used with `Vue.use()`.","wrong":"import { VueSnip } from 'vue-snip'; // Incorrect named import\ncreateApp(App).use(VueSnip); // Vue 3 syntax on Vue 2","symbol":"VueSnip (Vue 2 plugin)","correct":"import VueSnip from 'vue-snip';\nVue.use(VueSnip);"},{"note":"The `v-snip` directive is globally registered after `Vue.use(VueSnip)` or `app.use(VueSnip)`. It takes an options object as its value.","wrong":"<p snip=\"{ lines: 3 }\">...</p> <!-- Not a standard HTML attribute -->\n<p :v-snip=\"{ lines: 3 }\">...</p> <!-- Colon is for binding, not for directives -->","symbol":"v-snip (Directive usage)","correct":"<p v-snip=\"{ lines: 3, mode: 'js' }\">...</p>"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport VueSnip from 'vue-snip';\n\nconst App = {\n  template: `\n    <div id=\"app\">\n      <h1>Vue Snip Example</h1>\n      <p v-snip=\"{ lines: 3, mode: 'js', midWord: false, onSnipped }\" :title=\"currentContent\">\n        {{ currentContent }}\n      </p>\n      <p>Has ellipsis: {{ hasEllipsis }}</p>\n      <button @click=\"toggleContent\">Toggle Content Length</button>\n      <p v-snip=\"{ lines: 2, mode: 'css' }\">\n        This is another paragraph demonstrating CSS mode snipping. It prioritizes\n        browser performance but might have varying compatibility. This example\n        will limit the text to two lines using CSS truncation. It's often a good\n        choice for static content or when maximum performance is critical.\n      </p>\n    </div>\n  `,\n  setup() {\n    const hasEllipsis = ref(false);\n    const fullContent = `This is a very long paragraph that demonstrates the functionality of vue-snip. It will be truncated to a maximum of three lines. If the content exceeds these three lines, an ellipsis will be added to indicate that more text is available. The 'onSnipped' callback will be triggered when the snipping occurs or changes, allowing us to react to the state of the ellipsis. This example uses JavaScript mode for snipping and ensures that words are not cut in half, making the text more readable. The content might change dynamically, and vue-snip should handle re-snipping automatically.`;\n    const shortContent = `This is a short paragraph.`;\n    const currentContent = ref(fullContent);\n\n    const onSnipped = (newState: { hasEllipsis: boolean }) => {\n      hasEllipsis.value = newState.hasEllipsis;\n      console.log('Snipped state changed:', newState.hasEllipsis);\n    };\n\n    const toggleContent = () => {\n      currentContent.value = currentContent.value === fullContent ? shortContent : fullContent;\n    };\n\n    return {\n      hasEllipsis,\n      onSnipped,\n      toggleContent,\n      currentContent,\n    };\n  },\n};\n\ncreateApp(App).use(VueSnip).mount('#app');","lang":"typescript","description":"This example demonstrates how to integrate `vue-snip` into a Vue 3 application, applying the `v-snip` directive to paragraphs with various options, including dynamic content toggling and an `onSnipped` callback to react to truncation changes. It showcases both JavaScript and CSS snipping modes."},"warnings":[{"fix":"For Vue 2: `import Vue from 'vue'; Vue.use(VueSnip);`. For Vue 3: `import { createApp } from 'vue'; createApp(App).use(VueSnip);`.","message":"Vue 2 and Vue 3 have different plugin installation APIs. Ensure you use `Vue.use(VueSnip)` for Vue 2 projects and `createApp(...).use(VueSnip)` for Vue 3 projects.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"If CSS mode presents issues, switch to `mode: 'js'` in the directive options: `<p v-snip=\"{ lines: 3, mode: 'js' }\">...</p>`.","message":"When using `mode: 'css'`, snipping might not work consistently across all browsers or in specific layout scenarios (e.g., flex containers without explicit widths). JavaScript mode (`mode: 'js'`) offers more robust and consistent behavior but can be slightly less performant.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always specify the `lines` option within the directive's value object: `<p v-snip=\"{ lines: 3 }\">...</p>`.","message":"The `v-snip` directive does not have a default `lines` value. If omitted, the directive will not perform any truncation.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"For Vue 3, ensure you use `createApp(App).use(VueSnip).mount('#app')` instead of `Vue.use(VueSnip)`.","cause":"Attempting to use `Vue.use()` in a Vue 3 environment where `Vue` is not globally exposed or when using the Composition API setup.","error":"TypeError: Cannot read properties of undefined (reading 'use') at <Root>"},{"fix":"Ensure you have called `Vue.use(VueSnip)` (Vue 2) or `createApp(...).use(VueSnip)` (Vue 3) before mounting your application.","cause":"The `vue-snip` plugin has not been correctly installed or registered with your Vue application instance.","error":"[Vue warn]: Failed to resolve directive: snip"},{"fix":"Ensure your `onSnipped` method is correctly returned from `setup()` in Vue 3 or part of the `methods` object in Vue 2, and then referenced in the directive options: `<p v-snip=\"{ lines: 3, onSnipped }\">...</p>`.","cause":"The `onSnipped` callback is defined in the `methods` option (Vue 2 Options API) or directly returned from `setup()` (Vue 3 Composition API), but not correctly bound to the `v-snip` directive.","error":"Property 'onSnipped' does not exist on type '{ ... }' (for Vue 3 Composition API)"}],"ecosystem":"npm"}