@jackdbd/fastify-webc

Fastify plugin to render WebC templates and components.

• Installation
• Configuration
• TypeScript
• Tips
• Dependencies
• References
• License

Installation

npm install @jackdbd/fastify-webc
Copy

Configuration

Register this plugin by telling it where to find your WebC components and templates.

This plugin decorates FastifyReply with a render method. This method takes two arguments: a WebC template and an optional data object.

import webc from '@jackdbd/fastify-webc'

fastify.register(webc, {
  components: ['src/components/**/*.webc'],
  templates: [path.join(__dirname, 'templates')]
})

fastify.get('/demo', function (request, reply) {
  const data = { foo: 'bar' }
  return reply.render('demo.webc', data)
})
Copy

TypeScript

To ensure TypeScript recognizes the render method as part of the FastifyReply object, you must use declaration merging to extend the FastifyReply interface.

declare module 'fastify' {
  interface FastifyReply {
    render(template: string, data?: Record<string, any>): Promise<void>
  }
}
Copy

Tips

You can access the WebC instance from your WebC template/component using this.webc.

<code>this.webc</code>
<pre @text="JSON.stringify(this.webc, null, 2)"></pre>
Copy

You can access the data available to the WebC template/component using this.$data.

<code>this.$data</code>
<pre @text="JSON.stringify(this.$data, null, 2)"></pre>
Copy

Dependencies

Package	Version
@11ty/webc	^0.11.4
fastify-plugin	^5.0.1

Peer	Version range
fastify	>=5.0.0

References

• eleventy-plugin-webc
• eleventy-plugin-bundle
• express-webc
• koa-webc

License

© 2024 - 2025 Giacomo Debidda // MIT License