A Fastify plugin to render Material Design Components with the pug template engine.
This is a wrapper around the mdc-pug package.
npm install fastify-mdc-pug
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 decoratereply
andfastify
- E.g.reply.view()
andfastify.view()
whereview
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')
.
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.
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.
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)