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

Find a component in the VF directory and use npm/Yarn or install it manually.

  • 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

Create 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