Installation

In order to use Van Elements, you will need:

• Some understanding of Web Components (Web Components MDN docs.)
• Basic knowledge of VanJS syntax (VanJS docs)

Package manager

npm

$ npm add vanjs-core vanjs-element

pnpm

$ pnpm add vanjs-core vanjs-element

yarn

$ yarn add vanjs-core vanjs-element

bun

$ bun add vanjs-core vanjs-element

import van from "vanjs-core";
import { define } from "vanjs-element";

Browser

Since Van Element doesn't require a build step, it can be loaded from a CDN or stored in a local file (download on jsDelivr).

CDN

<script src="https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-latest.nomodule.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanjs-element@latest/dist/van-element.browser.js"></script>

Local files

<script src="/path/to/vanjs"></script>
<script src="/path/to/van-element"></script>

Import maps

<!-- import maps are now baseline 🎉 -->
<script type="importmap">
  {
    "imports": {
      "vanjs-core": "https://esm.sh/vanjs-core",
      "vanjs-element": "https://esm.sh/vanjs-element"
    }
  }
</script>
<script type="module">
  import van from "vanjs-core";
  import { define } from "vanjs-element";

  ...
</script>

When imported in the global scope, you can use the global object vanE.

vanE.define(...);

Note:

Since it uses window.customElements, Van Element only works in the browser and should not be used during SSR. Refer to the documentation of your framework to prevent it from defining Van Elements on the server.