Framework Switching

LightningAddon ships with React by default, but the architecture supports Vue, Svelte, Angular, or vanilla JavaScript/TypeScript. This guide explains how to switch frameworks.

Default: React

Out of the box, all UI apps (popup, main, in-page) use React 19. The shared packages @repo/auth and @repo/ui are React components (hooks, JSX). No configuration needed — just run pnpm dev:main or pnpm dev:popup.

Framework-Agnostic Packages

These packages have no React dependency and work with any framework:

Package	What it provides
@repo/core	sendRuntimeMessage, addRuntimeMessageListener, RuntimeMessageMap, storage helpers, billing types
@repo/browser-utils	Storage, tabs, cookies, `getExtensionApi()
@repo/integrations	Env parsing (Zod), backend resolution

You can use these directly from Vue, Svelte, Angular, or vanilla code.

Using Vue, Svelte, or Angular

The Vite config in @repo/vite-config accepts a framework option:

createViteConfig('popup', { framework: 'vue' })    // Vue
createViteConfig('popup', { framework: 'svelte' })   // Svelte
createViteConfig('popup', { framework: 'angular' }) // Angular
createViteConfig('popup', { framework: 'vanilla' })  // No framework

1. Add the Vite Plugin

• Vue: Install @vitejs/plugin-vue and add it in packages/vite-config/vite.config.ts when framework === 'vue'
• Svelte: Install @sveltejs/vite-plugin-svelte and add it when framework === 'svelte'
• Angular: Install @angular-devkit/build-angular (or @nxext/angular-vite) and configure it when framework === 'angular'

2. Swap Dependencies

• Remove @repo/auth and @repo/ui from the app (they are React-specific)
• Use createAuth() from @repo/auth to get the ClientAuth interface — you can call it from Vue, Svelte, or Angular; you just can't use the React AuthProvider or useAuth hook
• Use sendRuntimeMessage from @repo/core for billing, profile, etc.
• Build your own login, billing, and settings UI in Vue, Svelte, or Angular

3. What Stays the Same

• Background service worker (no framework)
• Extension assembly (pnpm build:chrome, pnpm build:firefox)
• @repo/core and @repo/browser-utils
• Env setup, Stripe, auth adapters (Firebase/Supabase)

Vanilla Option

For framework: 'vanilla':

• No React, Vue, Svelte, or Angular
• Use sendRuntimeMessage and addRuntimeMessageListener from @repo/core for all messaging
• Use createAuth() for auth — subscribe to onAuthStateChange and call signInWithEmail, signOut, etc. manually
• Build UI with plain DOM or a minimal library

Summary

Layer	React	Vue/Svelte/Angular	Vanilla
@repo/core	✅	✅	✅
@repo/browser-utils	✅	✅	✅
@repo/auth (ClientAuth interface)	✅	✅ (use createAuth)	✅ (use createAuth)
@repo/auth (AuthProvider, useAuth)	✅	❌	❌
@repo/ui (BillingCard, etc.)	✅	❌ (build your own)	❌ (build your own)