Dealing with IDE reformatting (VSCode) Vue templates breaking white space preservation

I've been recently losing my mind with eslint and Vetur both reformatting blocks that need to not have any whitespace, and finally came up with a much better solution.

A simple re-usable single file component:

<template>
    <div class="preserve">{{ content }}</div>
</template>

<script>
export default {
    props: ["content"],
};
</script>

Simply use this component, without any worry about line length forcing it to break to a new line