vue-raw-pre

A what-you-see-is-what-you-get preformatted code tag for Vue.
vue-raw-pre exposes a single slot that outputs whatever you put into it verbatim.

Vue template	Renders in browser
<pre>   <code>     <button>       <octocat />     </button>   </code> </pre>
<v-raw-pre>   <button>     <octocat />   </button> </v-raw-pre>	<button>   <octocat /> </button>
<pre>   <code>     <span>{{ 1 + 2 }}</span>   </code> </pre>	3
<v-raw-pre>   <span>{{ 1 + 2 }}</span> </v-raw-pre>	<span>{{ 1 + 2 }}</span>

vue-raw-pre is great for writing technical documentation and code samples for your projects.

Installation

In your project folder:

yarn add vue-raw-pre --dev

In vue.config.js:

const addVueRawPreLoader = require("vue-raw-pre");
 
module.exports = {
  chainWebpack: (config) => {
    addVueRawPreLoader(config);
  },
};

In your template:

<v-raw-pre>
  ...
</v-raw-pre>

Props

By default, vue-raw-pre trims leading and trailing empty lines and dedents your code to the smallest common alignment.

To disable newline trimming, set no-trim on the tag.

<v-raw-pre no-trim>
  ...
</v-raw-pre>

To disable automatic code dedenting, set no-dedent on the tag.

<v-raw-pre no-dedent>
  ...
</v-raw-pre>

Setting both is naturally valid as well.

Technical details

Internally, vue-raw-pre works as a Webpack loader for .vue files. This allows it to escape tag contents before they're bundled by Vue's loaders.

This means that no component registration in required, the tag doesn't exist in your final bundle.

Currently only HTML templates in SFCs are supported.