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)