Elena + Vue Example

A minimal example demonstrating how to use Elena web components inside a Vue 3 application, built with Vite and TypeScript.

What is Elena?

Elena is a lightweight (2kB) library for building Progressive Web Components that work natively in the browser. This example uses both @elenajs/core and @elenajs/components, an example component library built on top of Elena.

What This Example Demonstrates

All examples live in src/App.vue and cover:

• Variants: default, primary, and danger button styles
• Interactive counter: Vue reactive state (ref) driving Elena button click handlers
• Dynamic attribute binding: cycling through variants reactively via :variant bindings

Prerequisites

• Node.js v20+
• pnpm v10+

Getting Started

# Install dependencies
pnpm install

# Start the development server
pnpm start

Open http://localhost:5173 in your browser.

Available Scripts

Command	Description
pnpm start	Start the Vite dev server
pnpm build	Type-check and build for production
pnpm preview	Preview the production build locally

Project Structure

src/
├── main.ts         # Vue entry point (mounts <App />)
├── App.vue         # Main component, all Elena examples live here
├── elena.d.ts      # TypeScript declarations for Elena elements
└── env.d.ts        # Vite environment types
index.html          # HTML shell
vite.config.ts      # Vite configuration
tsconfig.json       # TypeScript configuration

How Elena Web Components Are Used

Import the element and its styles, then use it as a regular template tag:

<script setup lang="ts">
import "@elenajs/components/dist/button.js"; // registers <elena-button>
import "@elenajs/components/dist/button.css"; // button styles
</script>

<template>
  <elena-button variant="primary" @click="() => console.log('clicked!')">Click me</elena-button>
</template>

TypeScript Support

src/elena.d.ts bridges Elena’s custom elements manifest with Vue’s type system. It maps every Elena element into Vue’s GlobalComponents interface via a mapped type, so you get full IntelliSense and type-safety in templates without listing each component manually:

import type { CustomElements } from "@elenajs/components";
import type { DefineComponent } from "vue";

type ElenaComponents = {
  [K in keyof CustomElements]: DefineComponent<CustomElements[K]>;
};

declare module "vue" {
  interface GlobalComponents extends ElenaComponents {}
}

The Vue Volar VSCode extension is required for template type checking. Install it via the Extensions panel, the project’s .vscode/extensions.json will prompt you automatically.