vue.js components : How to truncate the text in the slot element in a component?

The same thing on similar way can be:

in your main.js file:

var filter = function(text, length, clamp){
    clamp = clamp || '...';
    var node = document.createElement('div');
    node.innerHTML = text;
    var content = node.textContent;
    return content.length > length ? content.slice(0, length) + clamp : content;
};

Vue.filter('truncate', filter);

in your template:

{{data.content | truncate(300, '...')}}

You can use a filter to truncate it.

//credit to @Bill Criswell for this filter
Vue.filter('truncate', function (text, stop, clamp) {
    return text.slice(0, stop) + (stop < text.length ? clamp || '...' : '')
})

Then give the filter the length you want the string to be

<my-component>
    {{'Lorem ipsum dolor sit amet, consectetur adipisicing' | truncate 50 }}
</my-component>

Within the child component, content from a slot is passed through as-is, and isn't available as a variable that you could truncate from the child end.