CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componenttruncate
lnamba
lnamba

Reputation: 1721

vue-truncate-filter not filtering and throwing error

I am not able to use the vue-truncate-filter npm package. I Installed it using the command line with this command: 

npm install vue-truncate-filter --save

However I am seeing the following error:

[Vue warn]: Failed to resolve filter: truncate 30 '....'

Here is my template: 

<div v-show="wbwState[index]" v-bind:style="{ margin:`0 ${8}px ${8}px ${8}px`, color: '#C10E40' }">{{ word.english | truncate 5 '....' }}</div>

and:

<div class="eng">{{ word.english | truncate 5 '....' }}</div>

In main.js I have:

const VueTruncate = require('vue-truncate-filter');
Vue.use(VueTruncate)

I also tried using Vue.use() in the actual component itself. Can anyone see what I am doing wrong? Thanks!

Upvotes: 1

Views: 897

Answers (1)

Bert
Bert

Reputation: 82489

In Vue 2, this filter should be used like this:

{{ text | truncate(100) }}

So your code should be 

<div class="eng">{{ word.english | truncate(5) }}</div>

Here is a working example.

Upvotes: 3

Related Questions