fastify-mdc-pug

A Fastify plugin to render Material Design Components with the pug template engine.

This is a wrapper around the mdc-pug package.

Install

npm install fastify-mdc-pug

Backend app.js

Register the Fastify plugin to enable pug:

fastify.register(require('fastify-mdc-pug/plugin'));

Optional options:

• root: The root path of your templates folder. The template name or path passed to the render function will be resolved relative to this path. Default: ./views.
• propertyName: The property that should be used to decorate reply and fastify - E.g. reply.view() and fastify.view() where view is the property name. Default: view.

When you call reply.view(<template name> [, options]) from your route, the request object will be passed in the options. So in any pug template, the request variable is available to check its url, query, params, headers, etc.

Another addition is a dynamic include function, enabling parametrically including other templates through: != include('path/to/template').

Fontend main.js

You'll need a "bundler", e.g. Vite, Snowpack, WebPack, Rollup, or Parcel. It has to be able to compile .scss files using Sass, which is installed as a peerDependency.

Then the following line will suffice to pack all CSS and JavaScript:

import 'fastify-mdc-pug';

For an example setup using Vite, see https://github.com/wscherphof/fastify-htmxample.

Backend views/app.pug

Your node_modules directory is set as pug's basedir option, so that you can use an absolute path to include index.pug:

include /fastify-mdc-pug/index
+mdc
  <your-content>

Your content should be passed as a block to the mdc mixin, as shown, to ensure any containing MDC components are properly initialised in JavaScript.

Render Material Design Components

The https://www.npmjs.com/package/mdc-pug package provides the mixins to render MDC components from your templates. Its documentation pages are running here: https://mdc-pug.vercel.app/.

Example:

+mdc-typography('Hello World')
+mdc-button('Click Me')(raised)