virtual-jade-loader

A Webpack loader which uses virtual-jade to translate Jade/Pug templates into Hyperscript for Virtual DOM diffing/rendering flows. Works with libraries such as virtual-dom and snabbdom.

Installation

Add virtual-jade-loader to dev dependencies in package.json:

npm install --save-dev virtual-jade-loader

Tell Webpack to use this loader for .jade files, in webpack.config.js:

var webpackConfig = {
  module: {
    loaders: [
      {
        test: /\.jade$/,
        loader: 'virtual-jade',
      },
    ],
  },

  // ...

};

Configuration

Webpack >=4.0

The recommended way to configure options for virtual-jade is with a loader options object:

var webpackConfig = {
  module: {
    rules: [
      {
        test: /\.jade$/,
        use: [
          {
            loader: `virtual-jade-loader`,
            options: {
              runtime: `var h = require("my-special-lib/h");`,
            }
          },
        ],
      },

      // ...

    ],
  },
};

(see below for available options)

Webpack <4.0:

For older versions of Webpack, the recommended way to configure options for virtual-jade is with a top-level virtualJadeLoader object, e.g.:

var webpackConfig = {
  module: {
    // ...
  },

  virtualJadeLoader: {
    runtime: 'var h = require("my-special-lib/h");',
  },

  // ...
};

The available options are:

• marshalDataset
• pretty
• propsWrapper
• runtime
• vdom

See the virtual-jade documentation for an explanation of the options.

Usage

With Webpack configured as above, simply import/require a Jade file to access the compiled template function, which returns a virtual-dom VNode instead of HTML:

import template from './index.jade';
const vtree = template({foo: 'bar'});

License

MIT