# @openmfe/eleventy-plugin

> OpenMFE integration plugin for eleventy

Latest version **0.3.0** (published 2023-02-14) · 0 weekly downloads

## Install

```sh
npm install @openmfe/eleventy-plugin
pnpm add @openmfe/eleventy-plugin
yarn add @openmfe/eleventy-plugin
bun add @openmfe/eleventy-plugin
```

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2023-02-14 |
| First published | 2022-03-11 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 4.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tui-releases, lxg |

## Links

- npm: https://www.npmjs.com/package/@openmfe/eleventy-plugin
- npm.io page: https://npm.io/package/@openmfe/eleventy-plugin

## Dependencies (3)

- [yaml](https://npm.io/package/yaml.md) ^2.2.1
- [node-fetch](https://npm.io/package/node-fetch.md) ^2.6.6
- [@openmfe/manifest](https://npm.io/package/@openmfe/manifest.md) ^0.3.0

## Recent versions

- 0.3.0 (latest) — 2023-02-14
- 0.2.3 — 2023-01-28
- 0.2.2 — 2023-01-28
- 0.2.0 — 2022-05-16
- 0.1.2 — 2022-03-14
- 0.1.1 — 2022-03-11

## README

# OpenMFE Eleventy Plugin


This is a plugin for the Eleventy Static Site Generator (SSG). It allows embedding a microfrontend into an Eleventy page via Shortcode.

The tag name is `openmfe`, the first parameter is the microfrontend’s tag name, the second parameter is a map of attributes and their values, the third parameter is a map of configuration options.

For example, assuming there is a microfrontend which offers the `hotel-offers` tag and accepts the `region` attribute, you would place the following code anywhere in your template:

```
{% openmfe "hotel-offers", { region: region.id } %}
```

Please note that currently only the Nunjucks language is supported.

For instance, to create a full-blown instance of the `hotel-offers` microfrontend, you can use the following Nunjucks snippet:

```liquid
{\% openmfe "hotel-offers", { region: 1197 }, { semantic: true } %}
```

This generates the following output:

```html
<script type="application/ld+json">
    // … full block of JSON-LD …
</script>
<hotel-offers region='1197'>
    <div class=main style=all:initial;display:block;overflow:hidden>
        <!-- full block of prerendered HTML (plus a bit of SVG for loading animation) -->
    </div>
</hotel-offers>
<script src="http://localhost:9081/main.js" async></script>
```

# Installation 

You need to install the `openmfe` eleventy plugin by adding this code into the `.eleventy.js` file.

```js 
const openmfe = require('@openmfe/eleventy-plugin');

eleventyConfig.addPlugin(openmfe, { manifest: 'https://<MFE_CDN_FOLDER>/openmfe/manifest.yaml' });
```

If you have multiple MFE's in your application: 

```js 
const openmfe = require('@openmfe/eleventy-plugin');

eleventyConfig.addPlugin(openmfe, {
    manifests: [
        {
            mfe: "mfe-demo",
            manifest: "https://<MFE_DEMO_CDN_FOLDER>/openmfe/manifest.yaml",
        },
        {
            mfe: "mfe-example",
            manifest: "https://<MFE_EXAMPLE_CDN_FOLDER>/openmfe/manifest.yaml",
        },
    ],
});
```

---
_Source: https://npm.io/package/@openmfe/eleventy-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._