Eleventy for the VF 2.0

This allows using the 11ty static site generator with direct access to Visual Framework 2.0 components.

☝️that also means dynamic building of just the CSS and JS you need.


  yarn create @visual-framework/vf-eleventy your-new-site-name vf-eleventy

This will install a new vf-eleventy to a folder named your-new-site-name.

Then follow the onscreen prompts and links below to develop and configure.

Longer install?

The above too easy or have questions? Read this guide.

What you get

Component installation

To add a component you can use npm/Yarn or install it manually.

In either case you'll need to re-run gulp dev to ensure the component is fully loaded.

  • installation: yarn add @visual-framework/vf-logo
  • updating: yarn upgrade-interactive --latest

Manual installation for customisation

  1. Download a pattern
  2. Copy it to ./src/components/vf-component-name

Add your own local component

You can add a custom VF-compatible component to ./src/components and use it in your site.

  • gulp vf-component

You'll find a vf-sample component there, we've used it below:


{% render "@vf-sample", {text: "with some text"} %}


I'm a sample with some text
Geting started links: View vf-eleventy on GitHub | VF-Core v2.0 | Chat for help