evoluhq · trevorpe · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025 · Jul 18, 2025
diff --git a/.changeset/legal-moments-laugh.md b/.changeset/legal-moments-laugh.md
@@ -0,0 +1,5 @@
+---
+"@evolu/vue": minor
+---
+
+Introduces a Vue integration for Evolu
diff --git a/apps/web/src/app/(docs)/docs/examples/page.mdx b/apps/web/src/app/(docs)/docs/examples/page.mdx
@@ -1,5 +1,6 @@
 import { ReactExamples } from "@/components/ReactExamples";
 import { SvelteExamples } from "@/components/SvelteExamples";
+import { VueExamples } from "@/components/VueExamples";
 
 export const metadata = {
   title: "Evolu Examples",
@@ -17,3 +18,7 @@ You can find examples of how to use the Evolu with frameworks below.
 ## Svelte
 
 <SvelteExamples />
+
+## Vue
+
+<VueExamples />
diff --git a/apps/web/src/components/VueExamples.tsx b/apps/web/src/components/VueExamples.tsx
@@ -0,0 +1,40 @@
+import { Button } from "@/components/Button";
+import ViteLogo from "@/components/icons/frameworks/Vite";
+
+const examples = [
+  {
+    repo: "https://github.com/evoluhq/evolu/tree/main/examples/vue-vite-pwa",
+    name: "Vite + Vue + PWA",
+    description: "Offline support, installable on mobile.",
+    logo: ViteLogo,
+  },
+];
+
+export function VueExamples(): React.ReactElement {
+  return (
+    <div className="my-16 xl:max-w-none">
+      <div className="not-prose mt-4 grid grid-cols-1 gap-x-6 gap-y-10 border-t border-zinc-900/5 pt-10 sm:grid-cols-2 xl:max-w-none xl:grid-cols-2 dark:border-white/5">
+        {examples.map((example) => (
+          <div key={example.name} className="relative flex gap-6">
+            <div className="flex-auto pl-12">
+              <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
+                {example.name}
+              </h3>
+              <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
+                {example.description}
+              </p>
+              <p className="mt-4 flex items-center gap-3">
+                {example.repo && (
+                  <Button href={example.repo} target="_blank" variant="text">
+                    Go to repository
+                  </Button>
+                )}
+              </p>
+            </div>
+            <example.logo className="absolute top-0 size-6 dark:text-white" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/examples/vue-vite-pwa/.gitignore b/examples/vue-vite-pwa/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+dev-dist
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vue-vite-pwa/.vscode/extensions.json b/examples/vue-vite-pwa/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}
diff --git a/examples/vue-vite-pwa/README.md b/examples/vue-vite-pwa/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + TypeScript + Vite
+
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
diff --git a/examples/vue-vite-pwa/index.html b/examples/vue-vite-pwa/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vue-vite-pwa</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/vue-vite-pwa/package.json b/examples/vue-vite-pwa/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@example/vue-vite-pwa",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@evolu/common": "workspace:*",
+    "@evolu/vue": "workspace:*",
+    "@evolu/web": "workspace:*",
+    "@vite-pwa/assets-generator": "^0.2.6",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.11",
+    "vite-plugin-pwa": "^0.21.1",
+    "vue": "^3.5.13",
+    "vue-tsc": "^2.2.0",
+    "workbox-window": "^7.3.0"
+  }
+}
diff --git a/examples/vue-vite-pwa/public/favicon.svg b/examples/vue-vite-pwa/public/favicon.svg
diff --git a/examples/vue-vite-pwa/pwa-assets.config.ts b/examples/vue-vite-pwa/pwa-assets.config.ts
@@ -0,0 +1,12 @@
+import {
+    defineConfig,
+    minimal2023Preset as preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+    headLinkOptions: {
+        preset: '2023',
+    },
+    preset,
+    images: ['public/favicon.svg'],
+})