Webpack loader for translating Jade templates to virtual-dom Hyperscript
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
test
.eslintrc.json
.gitignore
.npmignore
.travis.yml
README.md
package-lock.json
package.json

README.md

virtual-jade-loader

Build Status

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