Skip to content

Etheryte/vue-raw-pre

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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>
Octocat mark
<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.

About

A verbatim pre code tag for Vue

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published