What whitespace are you referring to? I'm not really understanding what the problem is.

Consider this minimum example:

<template>
    <pre>{{{line}}}</pre>
</template>

<script>
module.exports = {
  data: function() {
    return {
      line: '   <span>this has whitespace</span>'
    }
  }
}
</script>

Note the whitespace in front of the <span> tag, which should be rendered but isn't. If I remove the <span> tags it works. This only happens when using {{{ in combination with embedded HTML tags.

@BenRomberg Vue does somehow trim out spaces from the {{{ expression }}}, but you probably don't need triple braces in the first place, as you most likely don't want real <span> tags inside your <pre>, but rather want encoded <span>, which will display as <span>. And for that you need to use {{ expression }}: https://jsfiddle.net/simplesmiler/vr0hdg1h/

@simplesmiler thanks for chiming in.

I'm aware of the implications of {{{ and my usage of it is indeed intended.

@BenRomberg I don't get then why do you need the real <span>'s inside the <pre>. Syntax highlighting?

Thanks, works like a charm!