Modules

Use ESM and TypeScript modules to create pages, layouts, and store data.

Options

extensions string[]: Default:
[ ".js", ".ts" ]
pageSubExtension string: Default:
".page"
includes string

Description

Lume is built on top of Deno, so it has native support for JavaScript and TypeScript modules. This plugin allows you to use JavaScript and TypeScript to create pages, layouts, and data files.

Creating _data files

Create _data.js or _data/*.js (or the TypeScript equivalent _data.ts or _data/*.ts) files to save shared data.

export const users = [
  {
    name: "Oscar",
    surname: "Otero",
  },
  {
    name: "Michael",
    surname: "Jackson",
  },
];

To create pages using JavaScript or TypeScript, create a file with the extension .page.js or .page.ts (the .page subextension is required to differentiate JavaScript/TypeScript files that generate HTML pages from other JavaScript files to be executed in the browser). To export the variables, use named exports and to export the main content you can use the default export.

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default "This is my first post using lume. I hope you like it!";

The default export can be a function. It will be executed by passing all the available data in the first argument and the filters in the second argument:

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data, filters) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

export const title = "Welcome to my page";
export const layout = "layouts/main.vto";

export default (data: Lume.Data, helpers: Lume.Helpers) =>
  `<h1>${data.title}</h1>
  <p>This is my first post using lume. I hope you like it!</p>
  <a href="${filters.url("/")}">Back to home</a>`;

JavaScript/TypeScript allows generating multiple pages from the same file. See Pagination for more info.

Creating layouts

It's possible to create layouts using JavaScript/TypeScript. Just create .js or .ts files inside the _includes directory.

export default ({ title, content }, filters) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

export default ({ title, content }: Lume.Data, helpers: Lume.Helpers) =>
  `<html>
    <head>
      <title>${title}</title>
    </head>
    <body>
      ${content}
    </body>
  </html>`;

Components

Create a reusable JavaScript or TypeScript component in its own file:

export default function ({ content }) {
  return `
    <button class="my-button">
      ${content}
    </button>
  `;
}

Import it in your page and pass the data it needs:

import button from "./_components/button.ts";

export default async function () {
  return await button({ content: "Click me!" });
}

Since Lume 3.3.0 (requires Deno 2.9.0 or later), directly imported local modules inside your src folder are automatically reloaded in --serve or --watch mode. Older versions require restarting the server after changes.

Lume-managed components

Lume-managed components provide automatic CSS and JavaScript collection and inherited directory data. To use these features, render the component through the comp variable instead of importing it:

export default async function ({ comp }) {
  return await comp.button({ content: "Click me!"});
}