Displaying Curly Braces in Vue App

I was running into an issue where my code blocks were not being rendered in my page. I would have something like this:

<div class="post">
    <pre>
        <code>
            <p>{{ $name }}</p>
        </code>
    </pre>
</div>

Now, when this post was rendered inside of a Vue application, it would return an error resulting in a blank white page. That's because Vue was trying to render {{ $name }}, and it was failing.

How to fix: Simply add the v-pre attribute to the container element, and Vue will not render any code inside that element.

<div class="post" v-pre>
    <pre>
        <code>
            <p>{{ $name }}</p>
        </code>
    </pre>
</div>

So, next time you run into this issue, make sure to reach for the v-pre attribute.