Vuejs vue-truncate-filter package showing ReferenceError

Question

I've installed npm install vue-truncate-filter --save for VueJs to cut extra strings for UI purpose. According to package documentation I've implemented the package step by step in my application but it's showing me error. I'm writing same steps here please guide me where I'm wrong:

1- Install vue-trauncate-filter package using npm

npm install vue-truncate-filter --save

2- include vue-trancate-filter in application

var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)

3- Used it in my template using this code

{{ text | truncate 100 '....' }}

after implementation when I hit the url in browser it showing following error ReferenceError: require is not defined

I tried to find solution but I'm unable to solve the issue. Thanks in advance for help.

Answer 1

One way is just include the file like traditional javascript in your html file. Don't add require i'm placing path what I understand from your code. Please make it according to your directory if path is wrong

<script src="./node_modules/vue-truncate-filter/vue-truncate.js"></script>

After including this file just remove code bellow from your code

var VueTruncate = require('./node_modules/vue-truncate-filter');
Vue.use(VueTruncate)

The code you are using to hide extra string is only for vuejs 1 not for vuejs 2 so please replace your code

{{ text | truncate 100 '....' }}

with this code, it's for vuejs 2

{{ text | truncate(100)}}

hopefully it will work.