firebase · russellwheatley · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026 · Mar 6, 2026
diff --git a/examples/vue/.gitignore b/examples/vue/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue/README.md b/examples/vue/README.md
@@ -0,0 +1,22 @@
+# Vue + React (veaury)
+
+This example demonstrates `@firebase-oss/ui-react` running inside a Vue 3 application using [veaury](https://github.com/devilwjp/veaury).
+
+Rather than duplicating the React source, `src/react_app` is a symlink to `../react/src`. A thin wrapper component — `src/ReactRoot.tsx` — re-exports the full React route tree (the same `<BrowserRouter>`, `<FirebaseUIProvider>`, and screen routes as the React example) as a single React component. `App.vue` mounts it into the Vue app with `applyPureReactInVue(ReactRoot)`.
+
+## How it works
+
+```
+App.vue
+  └─ applyPureReactInVue(ReactRoot)   ← veaury bridges Vue → React
+       └─ ReactRoot.tsx               ← BrowserRouter + FirebaseUIProvider + routes
+            └─ react_app/            ← symlink to examples/react/src
+```
+
+Vite is configured with veaury's `type: "react"` mode, which restricts the Vue JSX transform to inline JSX inside `.vue` script blocks and sends all standalone `.tsx`/`.jsx` files through the React plugin. 
+
+## Running
+
+```bash
+pnpm dev
+```
diff --git a/examples/vue/declarations.d.ts b/examples/vue/declarations.d.ts
@@ -0,0 +1,9 @@
+declare module "veaury/vite/index.js" {
+  const plugin: (options?: {
+    type?: "vue" | "react" | "custom";
+    vueJsxInclude?: RegExp[];
+    vueJsxExclude?: RegExp[];
+    reactOptions?: Record<string, unknown>;
+  }) => unknown;
+  export default plugin;
+}
diff --git a/examples/vue/index.html b/examples/vue/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue</title>
+  </head>
+  <body class="dark:bg-neutral-900 dark:text-white">
+    <script>
+      document.documentElement.classList.toggle("dark", localStorage.theme === "dark" || (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches));
+    </script>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue/package.json b/examples/vue/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "vue",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@firebase-oss/ui-core": "workspace:*",
+    "@firebase-oss/ui-react": "workspace:*",
+    "@firebase-oss/ui-styles": "workspace:*",
+    "@firebase-oss/ui-translations": "workspace:*",
+    "firebase": "catalog:",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-router": "^7.5.1",
+    "veaury": "^2.6.3",
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "^24.10.1",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
+    "@vue/tsconfig": "^0.8.1",
+    "tailwindcss": "catalog:",
+    "typescript": "~5.9.3",
+    "vite": "catalog:",
+    "vue-tsc": "^3.1.5"
+  }
+}
diff --git a/examples/vue/public b/examples/vue/public
@@ -0,0 +1 @@
+../react/public
diff --git a/examples/vue/src/App.vue b/examples/vue/src/App.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { applyPureReactInVue } from "veaury";
+import { setVeauryOptions } from "veaury";
+import { createRoot } from "react-dom/client";
+import ReactRootComponent from "./ReactRoot";
+
+// react-dom 19+ requires explicit createRoot configuration
+setVeauryOptions({ react: { createRoot } });
+
+const ReactApp = applyPureReactInVue(ReactRootComponent);
+</script>
+
+<template>
+  <ReactApp />
+</template>
diff --git a/examples/vue/src/ReactRoot.tsx b/examples/vue/src/ReactRoot.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { BrowserRouter, Routes, Route, Outlet, NavLink } from "react-router";
+import { FirebaseUIProvider, useUI } from "@firebase-oss/ui-react";
+import { ui, auth } from "./react_app/firebase/firebase";
+import App from "./react_app/App";
+import SnapchatCallbackScreen from "./react_app/screens/snapchat-callback-screen";
+import { hiddenRoutes, routes } from "./react_app/routes";
+import { enUs } from "@firebase-oss/ui-translations";
+import { pirate } from "./react_app/pirate";
+import "./react_app/index.css";
+
+const allRoutes = [...routes, ...hiddenRoutes];
+
+export default function ReactRoot() {
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    auth.authStateReady().then(() => setReady(true));
+  }, []);
+
+  if (!ready) return null;
+
+  return (
+    <BrowserRouter>
+      <FirebaseUIProvider
+        ui={ui}
+        policies={{
+          termsOfServiceUrl: "https://www.google.com",
+          privacyPolicyUrl: "https://www.google.com",
+        }}
+      >
+        <ThemeToggle />
+        <PirateToggle />
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/auth/snapchat/callback" element={<SnapchatCallbackScreen />} />
+          <Route element={<ScreenRoute />}>
+            {allRoutes.map((route) => (
+              <Route key={route.path} path={route.path} element={<route.component />} />
+            ))}
+          </Route>
+        </Routes>
+      </FirebaseUIProvider>
+    </BrowserRouter>
+  );
+}
+
+function ScreenRoute() {
+  return (
+    <div className="p-8">
+      <NavLink
+        to="/"
+        className="border border-gray-300 dark:border-gray-700 border-rounded px-4 py-2 rounded-md text-sm"
+      >
+        &larr; Back to overview
+      </NavLink>
+      <div className="pt-12">
+        <Outlet />
+      </div>
+    </div>
+  );
+}
+
+function ThemeToggle() {
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-8 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        document.documentElement.classList.toggle("dark", !document.documentElement.classList.contains("dark"));
+        localStorage.theme = document.documentElement.classList.contains("dark") ? "dark" : "light";
+      }}
+      title="Toggle theme"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="size-4.5"
+      >
+        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+        <path d="M12 3l0 18" />
+        <path d="M12 9l4.65 -4.65" />
+        <path d="M12 14.3l7.37 -7.37" />
+        <path d="M12 19.6l8.85 -8.85" />
+      </svg>
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+}
+
+function PirateToggle() {
+  const ui = useUI();
+  const isPirate = ui.locale.locale === "pirate";
+
+  return (
+    <button
+      className="fixed z-10 size-10 top-8 right-20 border border-gray-300 dark:border-gray-700 rounded-md p-2 group/toggle extend-touch-target"
+      onClick={() => {
+        if (isPirate) {
+          ui.setLocale(enUs);
+        } else {
+          ui.setLocale(pirate);
+        }
+      }}
+    >
+      {isPirate ? "🇺🇸" : "🏴‍☠️"}
+    </button>
+  );
+}
diff --git a/examples/vue/src/env.d.ts b/examples/vue/src/env.d.ts
@@ -0,0 +1,19 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent;
+  export default component;
+}
+
+declare module "*.jsx" {
+  const component: unknown;
+  export default component;
+}
+
+declare module "veaury/vite/index.js" {
+  const plugin: (options?: {
+    type?: "vue" | "react" | "custom";
+    vueJsxInclude?: RegExp[];
+    vueJsxExclude?: RegExp[];
+  }) => unknown;
+  export default plugin;
+}
diff --git a/examples/vue/src/main.ts b/examples/vue/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+
+createApp(App).mount("#app");
diff --git a/examples/vue/src/react_app b/examples/vue/src/react_app
@@ -0,0 +1 @@
+../../react/src
diff --git a/examples/vue/tsconfig.app.json b/examples/vue/tsconfig.app.json
@@ -0,0 +1,25 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "types": ["vite/client"],
+    // jsx: preserve lets veaury's vite plugin decide per-file whether to
+    // use Vue JSX or React JSX transforms, avoiding type conflicts.
+    "jsx": "preserve",
+    // Both @vue/runtime-dom and @types/react extend the global JSX namespace,
+    // which causes conflicts. skipLibCheck suppresses those IDE errors.
+    "skipLibCheck": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "src/**/*.d.ts"],
+  // ReactRoot.tsx is a React file — it is type-checked by tsconfig.react.json
+  // (jsxImportSource:react) rather than here (jsxImportSource:vue).
+  "exclude": ["src/ReactRoot.tsx"]
+}
diff --git a/examples/vue/tsconfig.json b/examples/vue/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.react.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
diff --git a/examples/vue/tsconfig.node.json b/examples/vue/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts", "declarations.d.ts"]
+}
diff --git a/examples/vue/tsconfig.react.json b/examples/vue/tsconfig.react.json
@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.react.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    // Keep jsx:preserve so Vite/veaury handles the transform at build time,
+    // but set jsxImportSource:react so TypeScript validates JSX against
+    // React's type definitions (className, SVG camelCase attrs, etc.) rather
+    // than Vue's.
+    "jsx": "preserve",
+    "jsxImportSource": "react",
+
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src/ReactRoot.tsx"]
+}
diff --git a/examples/vue/vite.config.ts b/examples/vue/vite.config.ts
@@ -0,0 +1,23 @@
+import { defineConfig, type Plugin } from "vite";
+import tailwindcss from "@tailwindcss/vite";
+import veauryVitePlugins from "veaury/vite/index.js";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    // type:"react" restricts the Vue JSX plugin to only JSX inside .vue script
+    // blocks. All standalone .tsx/.jsx files — both ReactRoot.tsx and every
+    // file resolved through the react_app symlink — are handled by the React
+    // plugin. This is necessary because Vite resolves the symlink before
+    // passing paths to plugins (preserveSymlinks:false), so path-based exclude
+    // patterns like /react_app/ would never match the real on-disk paths.
+    veauryVitePlugins({
+      type: "react",
+    }) as Plugin,
+  ],
+  resolve: {
+    // Ensure Vite follows the react_app symlink into the sibling package.
+    preserveSymlinks: false,
+  },
+});