Guides Components

Use Web Components

Add Web Components with the @primate/web-components module.

Web Components are client-side only.

1) Install

Install the Primate Web Components package.

npm i @primate/web-components

2) Configure

Load the Web Components module in your configuration.

import config from "primate/config";
import WebComponents from "@primate/web-components";

export default config({
  modules: [
    WebComponents(),
  ],
});

3) Write a component

Compose a component as a custom element.

<script>
  import Component from "@primate/webc/Component";

  export default class Welcome extends Component {
    render() {
      const { name } = this.props;

      return `Hello, ${name}!`;
    }
  }
</script>

4) Render the component

Use response.view in a route to render the template.

// routes/index.ts
import route from "primate/route";
import response from "primate/response";

export default route({
  get() {
    return response.view("Welcome.webc", { name: "World" });
  },
});