Frontends

Marko

Edit on GitHub

This handler module supports SSR and serves Marko components with the .marko extension.

Install

npm install @primate/frontend @marko/{compiler,translator-default}@5

Configure

Import and initialize the module in your configuration.

primate.config.js
import { marko } from "@primate/frontend";

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

Use

Create a Marko component in components.

components/post-index.marko
<h1>All posts</h1>
<for|post| of=input.posts>
  <h2>
    <a href="/post/view/${post.id}">
      ${post.title}
    </a>
  </h2>
</for>

Serve it from a route.

routes/marko.js
import { view } from "primate";

const posts = [{
  id: 1,
  title: "First post",
}];

export default {
  get() {
    return view("post-index.marko", { posts });
  },
};

The rendered component will be accessible at http://localhost:6161/marko.

Configuration options

extension

Default ".marko"

The file extension associated with Marko components.

Resources

Previous
Markdown
Next
Types