Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
VueSnip (Vue 3 plugin)
✓ import VueSnip from 'vue-snip';
createApp(App).use(VueSnip).mount('#app');
✗ import { VueSnip } from 'vue-snip'; // Incorrect named import
const VueSnip = require('vue-snip'); // CJS not typical for Vue 3
VueSnip is the default export for the plugin. In Vue 3, it's used with `createApp().use()`.
VueSnip (Vue 2 plugin)
✓ import VueSnip from 'vue-snip';
Vue.use(VueSnip);
✗ import { VueSnip } from 'vue-snip'; // Incorrect named import
createApp(App).use(VueSnip); // Vue 3 syntax on Vue 2
VueSnip is the default export for the plugin. In Vue 2, it's used with `Vue.use()`.
v-snip (Directive usage)
✓ <p v-snip="{ lines: 3, mode: 'js' }">...</p>
✗ <p snip="{ lines: 3 }">...</p> <!-- Not a standard HTML attribute -->
<p :v-snip="{ lines: 3 }">...</p> <!-- Colon is for binding, not for directives -->
The `v-snip` directive is globally registered after `Vue.use(VueSnip)` or `app.use(VueSnip)`. It takes an options object as its value.
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.
import { createApp, ref } from 'vue';
import VueSnip from 'vue-snip';
const App = {
template: `
<div id="app">
<h1>Vue Snip Example</h1>
<p v-snip="{ lines: 3, mode: 'js', midWord: false, onSnipped }" :title="currentContent">
{{ currentContent }}
</p>
<p>Has ellipsis: {{ hasEllipsis }}</p>
<button @click="toggleContent">Toggle Content Length</button>
<p v-snip="{ lines: 2, mode: 'css' }">
This is another paragraph demonstrating CSS mode snipping. It prioritizes
browser performance but might have varying compatibility. This example
will limit the text to two lines using CSS truncation. It's often a good
choice for static content or when maximum performance is critical.
</p>
</div>
`,
setup() {
const hasEllipsis = ref(false);
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.`;
const shortContent = `This is a short paragraph.`;
const currentContent = ref(fullContent);
const onSnipped = (newState: { hasEllipsis: boolean }) => {
hasEllipsis.value = newState.hasEllipsis;
console.log('Snipped state changed:', newState.hasEllipsis);
};
const toggleContent = () => {
currentContent.value = currentContent.value === fullContent ? shortContent : fullContent;
};
return {
hasEllipsis,
onSnipped,
toggleContent,
currentContent,
};
},
};
createApp(App).use(VueSnip).mount('#app');
Errors
Common errors & fixes
TypeError: Cannot read properties of undefined (reading 'use') at <Root>
Attempting to use `Vue.use()` in a Vue 3 environment where `Vue` is not globally exposed or when using the Composition API setup.
fixFor Vue 3, ensure you use `createApp(App).use(VueSnip).mount('#app')` instead of `Vue.use(VueSnip)`. [Vue warn]: Failed to resolve directive: snip
The `vue-snip` plugin has not been correctly installed or registered with your Vue application instance.
fixEnsure you have called `Vue.use(VueSnip)` (Vue 2) or `createApp(...).use(VueSnip)` (Vue 3) before mounting your application.
Property 'onSnipped' does not exist on type '{ ... }' (for Vue 3 Composition API)
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.
fixEnsure 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>`. Audit
Dependencies
vuerequiredPeer dependency for Vue.js projects (supports Vue 2 and Vue 3).