Fix typo

Move vue up the nav
Write intro in react guide
2024-11-18 12:36:39 +00:00 · 2024-11-18 12:05:45 +00:00 · 2024-11-18 12:00:34 +00:00 · 2024-11-18 11:56:29 +00:00 · 2024-11-15 20:30:51 +01:00 · 2024-11-15 18:40:37 +00:00
83 changed files with 1500 additions and 289 deletions
--- a/.changeset/proud-bats-pay.md
+++ b/.changeset/proud-bats-pay.md
@@ -1,5 +0,0 @@
---
-"jazz-browser": patch
---
-
-Reuse the crypto instance between OPFS and the jazz context
--- a/.changeset/selfish-socks-jump.md
+++ b/.changeset/selfish-socks-jump.md
@@ -1,5 +0,0 @@
---
-"cojson-storage-indexeddb": patch
---
-
-Set up a unique peer id for the indexeddb storage
--- a/biome.json
+++ b/biome.json
@@ -7,7 +7,7 @@
  },
  "files": {
    "ignoreUnknown": false,
-    "ignore": ["jazz-tools.json"]
+    "ignore": ["jazz-tools.json", "**/ios/**", "**/android/**"]
  },
  "formatter": {
    "enabled": true,
--- a/e2e/BinaryCoStream/CHANGELOG.md
+++ b/e2e/BinaryCoStream/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @jazz-e2e/binarycostream

+## 0.0.100
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.99

 ### Patch Changes
--- a/e2e/BinaryCoStream/package.json
+++ b/e2e/BinaryCoStream/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@jazz-e2e/binarycostream",
  "private": true,
-  "version": "0.0.99",
+  "version": "0.0.100",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -16,7 +16,7 @@
    "cojson": "workspace:0.8.21",
    "hash-slash": "workspace:0.2.1",
    "is-ci": "^3.0.1",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
--- a/e2e/CoValues/CHANGELOG.md
+++ b/e2e/CoValues/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @jazz-e2e/covalues

+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.98

 ### Patch Changes
--- a/e2e/CoValues/package.json
+++ b/e2e/CoValues/package.json
@@ -1,7 +1,7 @@
 {
  "name": "@jazz-e2e/covalues",
  "private": true,
-  "version": "0.0.98",
+  "version": "0.0.99",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/examples/book-shelf/CHANGELOG.md
+++ b/examples/book-shelf/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-example-book-shelf

+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22
+
 ## 0.1.14

 ### Patch Changes
--- a/examples/book-shelf/package.json
+++ b/examples/book-shelf/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jazz-example-book-shelf",
-  "version": "0.1.14",
+  "version": "0.1.15",
  "private": true,
  "scripts": {
    "dev": "next dev",
@@ -11,8 +11,8 @@
  },
  "dependencies": {
    "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.21",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-browser-media-images": "workspace:0.8.22",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "next": "14.2.5",
    "react": "^18.2.0",
--- a/examples/chat-clerk/CHANGELOG.md
+++ b/examples/chat-clerk/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-example-chat

+## 0.0.99
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-react-auth-clerk@0.8.22
+
 ## 0.0.98

 ### Patch Changes
--- a/examples/chat-clerk/package.json
+++ b/examples/chat-clerk/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-chat-clerk",
  "private": true,
-  "version": "0.0.98",
+  "version": "0.0.99",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -19,8 +19,8 @@
    "clsx": "^2.0.0",
    "cojson": "workspace:0.8.21",
    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.21",
-    "jazz-react-auth-clerk": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
+    "jazz-react-auth-clerk": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
--- a/examples/chat-rn-clerk/CHANGELOG.md
+++ b/examples/chat-rn-clerk/CHANGELOG.md
@@ -1,5 +1,11 @@
 # chat-rn-clerk

+## 1.0.15
+
+### Patch Changes
+
+- jazz-react-auth-clerk@0.8.22
+
 ## 1.0.14

 ### Patch Changes
--- a/examples/chat-rn-clerk/package.json
+++ b/examples/chat-rn-clerk/package.json
@@ -1,7 +1,7 @@
 {
  "name": "chat-rn-clerk",
  "main": "index.js",
-  "version": "1.0.14",
+  "version": "1.0.15",
  "scripts": {
    "build": "expo export -p ios",
    "start": "expo start",
--- a/examples/chat-vue/CHANGELOG.md
+++ b/examples/chat-vue/CHANGELOG.md
@@ -1,5 +1,15 @@
 # chat-vue

+## 0.0.7
+
+### Patch Changes
+
+- a734530: fix useCoState reactivity
+- Updated dependencies [f6bc8af]
+- Updated dependencies [a734530]
+  - jazz-browser@0.8.22
+  - jazz-vue@0.8.12
+
 ## 0.0.6

 ### Patch Changes
--- a/examples/chat-vue/package.json
+++ b/examples/chat-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "chat-vue",
-  "version": "0.0.6",
+  "version": "0.0.7",
  "private": true,
  "type": "module",
  "scripts": {
--- a/examples/chat/CHANGELOG.md
+++ b/examples/chat/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-example-chat

+## 0.0.101
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.100

 ### Patch Changes
--- a/examples/chat/package.json
+++ b/examples/chat/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-chat",
  "private": true,
-  "version": "0.0.100",
+  "version": "0.0.101",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -20,7 +20,7 @@
    "clsx": "^2.0.0",
    "cojson": "workspace:0.8.21",
    "hash-slash": "workspace:0.2.1",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
--- a/examples/music-player/CHANGELOG.md
+++ b/examples/music-player/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-example-musicplayer

+## 0.0.21
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.20

 ### Patch Changes
--- a/examples/music-player/package.json
+++ b/examples/music-player/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-music-player",
  "private": true,
-  "version": "0.0.20",
+  "version": "0.0.21",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -18,7 +18,7 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "lucide-react": "^0.274.0",
    "react": "^18.2.0",
--- a/examples/onboarding/CHANGELOG.md
+++ b/examples/onboarding/CHANGELOG.md
@@ -0,0 +1,9 @@
+# jazz-example-onboarding
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22
--- a/examples/onboarding/package.json
+++ b/examples/onboarding/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-onboarding",
  "private": true,
-  "version": "0.0.1",
+  "version": "0.0.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/examples/password-manager/CHANGELOG.md
+++ b/examples/password-manager/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-password-manager

+## 0.0.20
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.19

 ### Patch Changes
--- a/examples/password-manager/package.json
+++ b/examples/password-manager/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-password-manager",
  "private": true,
-  "version": "0.0.19",
+  "version": "0.0.20",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -12,7 +12,7 @@
    "clean-install": "rm -rf node_modules pnpm-lock.yaml && pnpm install"
  },
  "dependencies": {
-    "jazz-react": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
--- a/examples/pets/CHANGELOG.md
+++ b/examples/pets/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-example-pets

+## 0.0.118
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-media-images@0.8.22
+
 ## 0.0.117

 ### Patch Changes
--- a/examples/pets/package.json
+++ b/examples/pets/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-pets",
  "private": true,
-  "version": "0.0.117",
+  "version": "0.0.118",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -19,8 +19,8 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "jazz-browser-media-images": "workspace:0.8.21",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-browser-media-images": "workspace:0.8.22",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
--- a/examples/todo-vue/.gitignore
+++ b/examples/todo-vue/.gitignore
@@ -0,0 +1 @@
+dist
--- a/examples/todo-vue/CHANGELOG.md
+++ b/examples/todo-vue/CHANGELOG.md
@@ -0,0 +1,11 @@
+# todo-vue
+
+## 0.0.5
+
+### Patch Changes
+
+- a734530: fix useCoState reactivity
+- Updated dependencies [f6bc8af]
+- Updated dependencies [a734530]
+  - jazz-browser@0.8.22
+  - jazz-vue@0.8.12
--- a/examples/todo-vue/README.md
+++ b/examples/todo-vue/README.md
@@ -0,0 +1,39 @@
+# todo-vue
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```
--- a/examples/todo-vue/env.d.ts
+++ b/examples/todo-vue/env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/examples/todo-vue/index.html
+++ b/examples/todo-vue/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/examples/todo-vue/package.json
+++ b/examples/todo-vue/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "todo-vue",
+  "version": "0.0.5",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build-type-check": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "format-and-lint": "biome check .",
+    "format-and-lint:fix": "biome check . --write"
+  },
+  "dependencies": {
+    "jazz-browser": "workspace:*",
+    "jazz-tools": "workspace:*",
+    "jazz-vue": "workspace:*",
+    "vue": "^3.5.11",
+    "vue-router": "^4.4.5"
+  },
+  "devDependencies": {
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^22.5.1",
+    "@vitejs/plugin-vue": "^5.1.4",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
+    "eslint-plugin-vue": "^9.28.0",
+    "npm-run-all2": "^6.2.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "3.3.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-vue-devtools": "^7.4.6",
+    "vue-tsc": "^2.1.6"
+  }
+}
--- a/examples/todo-vue/postcss.config.js
+++ b/examples/todo-vue/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/examples/todo-vue/public/favicon.ico
+++ b/examples/todo-vue/public/favicon.ico
--- a/examples/todo-vue/src/App.vue
+++ b/examples/todo-vue/src/App.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="app-container">
+    <header v-if="me" class="app-header">
+      <h1>Todo App</h1>
+      <div class="user-section">
+        <span>{{ me.profile?.name }}</span>
+        <button class="logout-btn" @click="logOut">Log out</button>
+      </div>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.app-container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+.app-header {
+  background-color: #fff;
+  padding: 1rem 2rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+h1 {
+  color: #2c3e50;
+  margin: 0;
+  font-size: 1.5rem;
+}
+
+.user-section {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logout-btn {
+  background-color: transparent;
+  border: 1px solid #dc3545;
+  color: #dc3545;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.logout-btn:hover {
+  background-color: #dc3545;
+  color: white;
+}
+
+main {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+</style>
+
+<script setup lang="ts">
+import { useAccount } from "./main";
+
+const { me, logOut } = useAccount();
+</script>
--- a/examples/todo-vue/src/assets/base.css
+++ b/examples/todo-vue/src/assets/base.css
@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
--- a/examples/todo-vue/src/assets/main.css
+++ b/examples/todo-vue/src/assets/main.css
@@ -0,0 +1 @@
+@import "./base.css";
--- a/examples/todo-vue/src/main.ts
+++ b/examples/todo-vue/src/main.ts
@@ -0,0 +1,42 @@
+import "./assets/main.css";
+import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
+import { createApp, defineComponent, h } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { ToDoAccount } from "./schema";
+
+const Jazz = createJazzVueApp<ToDoAccount>({ AccountSchema: ToDoAccount });
+export const { useAccount, useCoState } = Jazz;
+const { JazzProvider } = Jazz;
+
+const RootComponent = defineComponent({
+  name: "RootComponent",
+  setup() {
+    const { authMethod, state } = useDemoAuth();
+
+    return () => [
+      h(
+        JazzProvider,
+        {
+          auth: authMethod.value,
+          peer: "wss://mesh.jazz.tools/?key=vue-todo-example-jazz@gcmp.io",
+        },
+        {
+          default: () => h(App),
+        },
+      ),
+
+      state.state !== "signedIn" &&
+        h(DemoAuthBasicUI, {
+          appName: "Jazz Vue Todo",
+          state,
+        }),
+    ];
+  },
+});
+
+const app = createApp(RootComponent);
+
+app.use(router);
+
+app.mount("#app");
--- a/examples/todo-vue/src/router/index.ts
+++ b/examples/todo-vue/src/router/index.ts
@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from "vue-router";
+import Home from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: Home,
+    },
+  ],
+});
+
+export default router;
--- a/examples/todo-vue/src/schema.ts
+++ b/examples/todo-vue/src/schema.ts
@@ -0,0 +1,52 @@
+import { Account, CoList, CoMap, Group, Profile, co } from "jazz-tools";
+
+export class ToDoItem extends CoMap {
+  name = co.string;
+  completed = co.boolean;
+}
+
+export class ToDoList extends CoList.Of(co.ref(ToDoItem)) {}
+
+export class Folder extends CoMap {
+  name = co.string;
+  items = co.ref(ToDoList);
+}
+
+export class FolderList extends CoList.Of(co.ref(Folder)) {}
+
+export class ToDoAccountRoot extends CoMap {
+  folders = co.ref(FolderList);
+}
+
+export class ToDoAccount extends Account {
+  profile = co.ref(Profile);
+  root = co.ref(ToDoAccountRoot);
+
+  migrate(this: ToDoAccount, creationProps?: { name: string }) {
+    super.migrate(creationProps);
+    if (!this._refs.root) {
+      const group = Group.create({ owner: this });
+      const exampleTodo = ToDoItem.create(
+        { name: "Example todo", completed: false },
+        { owner: group },
+      );
+
+      const defaultFolder = Folder.create(
+        {
+          name: "Default",
+          items: ToDoList.create([exampleTodo], { owner: group }),
+        },
+        { owner: group },
+      );
+
+      this.root = ToDoAccountRoot.create(
+        {
+          folders: FolderList.create([defaultFolder], {
+            owner: this,
+          }),
+        },
+        { owner: this },
+      );
+    }
+  }
+}
--- a/examples/todo-vue/src/views/HomeView.vue
+++ b/examples/todo-vue/src/views/HomeView.vue
@@ -0,0 +1,285 @@
+<template>
+  <div class="todo-container">
+    <div class="folders">
+      <div class="section-header">
+        <h2>Folders</h2>
+        <div class="new-folder">
+          <input 
+            v-model="newFolderName" 
+            placeholder="New folder name" 
+            class="input"
+          />
+          <button class="btn btn-primary" @click="createFolder">Create</button>
+        </div>
+      </div>
+      
+      <div class="folder-list">
+        <div
+          v-for="folder in folders"
+          :key="folder?.id"
+          :class="['folder-item', { active: selectedFolder?.id === folder?.id }]"
+          @click="selectFolder(folder)"
+        >
+          <span class="folder-name">{{ folder?.name }}</span>
+          <button class="btn btn-icon" @click.stop="deleteFolder(folder?.id)">
+            <span class="material-icons">delete</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="todos" v-if="selectedFolder">
+      <div class="section-header">
+        <h2>{{ selectedFolder?.name }}</h2>
+        <div class="new-todo">
+          <input 
+            v-model="newTodoTitle" 
+            placeholder="Add a new task" 
+            class="input"
+          />
+          <button class="btn btn-primary" @click="createTodo">Add</button>
+        </div>
+      </div>
+
+      <div class="todo-list">
+        <template v-if="selectedFolder?.items?.length">
+          <div v-for="todo in selectedFolder.items" :key="todo?.id" class="todo-item">
+            <label class="todo-label">
+              <input
+                type="checkbox"
+                :checked="todo?.completed"
+                @change="toggleTodo(todo)"
+              />
+              <span :class="{ completed: todo?.completed }">{{ todo?.name }}</span>
+            </label>
+            <button class="btn btn-icon" @click="deleteTodo(todo?.id)">
+              <span class="material-icons">delete</span>
+            </button>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Group, type ID } from "jazz-tools";
+import { ref, toRaw, watch } from "vue";
+import { computed } from "vue";
+import { useAccount, useCoState } from "../main";
+import { Folder, FolderList, ToDoItem, ToDoList } from "../schema";
+
+const { me } = useAccount();
+
+const computedFoldersId = computed(() => me.value?.root?.folders?.id);
+const folders = useCoState(FolderList, computedFoldersId, [{ items: [{}] }]);
+
+const selectedFolder = ref<Folder>();
+const newFolderName = ref("");
+const newTodoTitle = ref("");
+
+// Select the first folder if none is selected
+watch(folders, (loadedFolders) => {
+  if (selectedFolder.value) return;
+  selectedFolder.value = loadedFolders?.[0] || undefined;
+});
+
+const selectFolder = (folder: Folder) => {
+  selectedFolder.value = folder;
+};
+
+const createFolder = () => {
+  if (!newFolderName.value.trim()) return;
+
+  // Create a group where the folder will be owned by the current user
+  const group = Group.create({ owner: me.value });
+
+  // Create the folder
+  const newFolder = Folder.create(
+    {
+      name: newFolderName.value,
+      items: ToDoList.create([], { owner: group }),
+    },
+    { owner: group },
+  );
+
+  // Add the folder to the list of folders. This change will be synced to all connected clients.
+  folders.value?.push(newFolder);
+  newFolderName.value = "";
+};
+
+const deleteFolder = (folderId: ID<Folder> | undefined) => {
+  if (!folders.value || !folderId) return;
+
+  const index = folders.value.findIndex((f) => f.id === folderId);
+  if (index !== -1) {
+    // Remove the folder from the list. This change will be synced to all connected clients.
+    folders.value.splice(index, 1);
+  }
+
+  if (selectedFolder.value?.id === folderId) {
+    selectedFolder.value = folders.value[0] || null;
+  }
+};
+
+// Todo handlers
+const createTodo = () => {
+  if (!newTodoTitle.value.trim() || !selectedFolder.value) return;
+  const group = Group.create({ owner: me.value });
+  const newTodo = ToDoItem.create(
+    {
+      name: newTodoTitle.value,
+      completed: false,
+    },
+    { owner: group },
+  );
+
+  // Add the todo to the list of todos. This change will be synced to all connected clients.
+  // toRaw is used to get the plain object from the reactive object, because the plain object is already proxied by Jazz.
+  // otherwise it will throw an error.
+  toRaw(selectedFolder.value)?.items?.push(newTodo);
+  newTodoTitle.value = "";
+};
+
+const deleteTodo = (todoId: ID<ToDoItem> | undefined) => {
+  if (!selectedFolder.value?.items || !todoId) return;
+
+  const index = toRaw(selectedFolder.value)?.items?.findIndex(
+    (t) => t?.id === todoId,
+  );
+  if (index !== -1 && index !== undefined) {
+    toRaw(selectedFolder.value)?.items?.splice(index, 1);
+  }
+};
+
+const toggleTodo = (todo: ToDoItem | null) => {
+  if (!todo) return;
+  todo.completed = !todo.completed;
+};
+</script>
+
+<style scoped>
+.todo-container {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  gap: 2rem;
+  height: 100%;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.section-header {
+  padding: 1.5rem;
+  border-bottom: 1px solid #eee;
+}
+
+h2 {
+  color: #2c3e50;
+  margin: 0 0 1rem 0;
+  font-size: 1.25rem;
+}
+
+.folders {
+  border-right: 1px solid #eee;
+}
+
+.folder-list,
+.todo-list {
+  padding: 1rem;
+}
+
+.folder-item {
+  padding: 0.75rem 1rem;
+  margin: 0.25rem 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+  color: #333;
+}
+
+.folder-item:hover {
+  background-color: #f8f9fa;
+}
+
+.folder-item.active {
+  background-color: #e9ecef;
+}
+
+.todo-item {
+  padding: 0.75rem 1rem;
+  margin: 0.25rem 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 6px;
+  transition: all 0.2s;
+  color: #333;
+}
+
+.todo-item:hover {
+  background-color: #f8f9fa;
+}
+
+.todo-label {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  color: #333;
+}
+
+.completed {
+  text-decoration: line-through;
+  color: #6c757d;
+}
+
+.input {
+  padding: 0.5rem 1rem;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  width: 100%;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  border: none;
+  font-size: 0.9rem;
+  transition: all 0.2s;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+.btn-icon {
+  padding: 0.25rem;
+  background: transparent;
+  color: #dc3545;
+}
+
+.btn-icon:hover {
+  background-color: #fee2e2;
+}
+
+.new-folder,
+.new-todo {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.folder-name {
+  color: #333;
+}
+</style>
--- a/examples/todo-vue/tailwind.config.js
+++ b/examples/todo-vue/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/examples/todo-vue/tsconfig.app.json
+++ b/examples/todo-vue/tsconfig.app.json
@@ -0,0 +1,14 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}
--- a/examples/todo-vue/tsconfig.json
+++ b/examples/todo-vue/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}
--- a/examples/todo-vue/tsconfig.node.json
+++ b/examples/todo-vue/tsconfig.node.json
@@ -0,0 +1,19 @@
+{
+  "extends": "@tsconfig/node20/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "nightwatch.conf.*",
+    "playwright.config.*"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "noEmit": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["node"]
+  }
+}
--- a/examples/todo-vue/vite.config.ts
+++ b/examples/todo-vue/vite.config.ts
@@ -0,0 +1,16 @@
+import { URL, fileURLToPath } from "node:url";
+
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
+import { defineConfig } from "vite";
+import vueDevTools from "vite-plugin-vue-devtools";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [vue(), vueJsx(), vueDevTools()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});
--- a/examples/todo/CHANGELOG.md
+++ b/examples/todo/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-example-todo

+## 0.0.117
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+
 ## 0.0.116

 ### Patch Changes
--- a/examples/todo/package.json
+++ b/examples/todo/package.json
@@ -1,7 +1,7 @@
 {
  "name": "jazz-example-todo",
  "private": true,
-  "version": "0.0.116",
+  "version": "0.0.117",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -16,7 +16,7 @@
    "@radix-ui/react-toast": "^1.1.4",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "lucide-react": "^0.274.0",
    "qrcode": "^1.5.3",
--- a/homepage/design-system/src/app/components/molecules/Prose.tsx
+++ b/homepage/design-system/src/app/components/molecules/Prose.tsx
@@ -13,7 +13,7 @@ export function Prose({
  const sizeClassName = {
    sm: "prose-sm",
    md: "",
-    lg: "prose-xl",
+    lg: "prose-lg lg:prose-xl",
  }[size];

  return (
--- a/homepage/homepage/app/docs/(others)/layout.tsx
+++ b/homepage/homepage/app/docs/(others)/layout.tsx
@@ -1,18 +1,9 @@
 import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";

-export const metadata = {
-  title: "Docs",
-  description: "Jazz Guide & Docs.",
-};
-
 export default function DocsLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
-  return (
-    <Prose className="overflow-x-hidden lg:flex-1">
-      {children}
-    </Prose>
-  );
+  return <Prose className="py-6 overflow-x-hidden lg:flex-1">{children}</Prose>;
 }
--- a/homepage/homepage/app/docs/(others)/page.mdx
+++ b/homepage/homepage/app/docs/(others)/page.mdx
@@ -0,0 +1,44 @@
+import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
+import { JazzLogo } from 'gcmp-design-system/src/app/components/atoms/logos/JazzLogo';
+
+<div className="not-prose">
+  <h1 className="sr-only">Getting started</h1>
+  <HeroHeader
+    title={<>Learn some <JazzLogo className="h-[1.3em] relative -top-0.5 inline-block -ml-[0.1em] -mr-[0.1em]"/></>}
+    slogan=""
+    pt={false}
+  />
+</div>
+
+Welcome to the Jazz documentation!
+
+The Jazz docs are currently heavily work in progress, sorry about that!
+
+## Quickstart
+
+To get started, set up Jazz in your project. Here's how you can do that on your framework of choice:
+
+- [React](/docs/project-setup/react)
+- [Next.js](/docs/project-setup/next)
+- [React Native](/docs/project-setup/react-native)
+- [Vue](/docs/project-setup/vue)
+
+Or you can follow this [React step-by-step guide](/docs/guide) where we walk you through building an issue tracker app.
+
+## Example apps
+
+You can also find [example apps](/examples) with code most similar to what you want to build. These apps
+make use of different features such as auth, file upload, and more.
+
+## Sync and storage
+
+Sync and persist your data by setting up a [sync and storage infrastructure](/docs/sync-and-storage) using Jazz Cloud, or do it yourself.
+
+## Collaborative values
+
+Learn how to structure your data using [collaborative values](/docs/schemas/covalues).
+
+## Get support
+
+If you have any questions or need assistance, please don't hesitate to reach out to us on [Discord](https://discord.gg/utDMjHYg42).
+We would love to help you get started.
--- a/homepage/homepage/app/docs/(others)/page.tsx
+++ b/homepage/homepage/app/docs/(others)/page.tsx
@@ -1,55 +0,0 @@
-import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
-
-export default function Page() {
-  return (
-    <Prose>
-      <h1>Welcome to the Jazz documentation.</h1>
-      <p>
-        The Jazz docs are currently heavily work in progress, sorry about that!
-      </p>
-      <p>The best ways to get started are:</p>
-      <ul>
-        <li>
-          Quickstart (work in progress)
-          <ol>
-            <li>
-              <a href="/docs/sync-and-storage">Sync & Storage Setup</a>
-            </li>
-            <li>
-              <a href="/docs/project-setup/react">React Project Setup</a>
-            </li>
-            <li>
-              <a href="/docs/schemas/covalues">
-                CoValue Basics & Schema Definition
-              </a>
-            </li>
-            <li>
-              <span className="opacity-50">Creating Covalues</span>
-            </li>
-            <li>
-              <span className="opacity-50">Using Covalues</span>
-            </li>
-          </ol>
-        </li>
-        <li>
-          The step-by-step <a href="/docs/guide">Guide</a> (work in progress)
-        </li>
-      </ul>
-      <p>Also make sure to:</p>
-      <ul>
-        <li>
-          Find an <a href="/docs/examples">example app with code</a> most
-          similar to what you want to build
-        </li>
-        <li>
-          Check out the <a href="/docs/api-reference">API Reference</a> (work in
-          progress)
-        </li>
-      </ul>
-      <p>
-        And the best way to get help is to join the{" "}
-        <a href="https://discord.gg/utDMjHYg42">Discord</a>!
-      </p>
-    </Prose>
-  );
-}
--- a/homepage/homepage/app/docs/[...slug]/guide.mdx
+++ b/homepage/homepage/app/docs/[...slug]/guide.mdx
@@ -1,26 +1,11 @@
-import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
 import { CodeGroup } from "@/components/forMdx";
-import { JazzLogo } from 'gcmp-design-system/src/app/components/atoms/logos/JazzLogo'

-<div className="not-prose">
-<HeroHeader
-    title={<>Learn some <JazzLogo className="h-[1.3em] relative -top-0.5 inline-block -ml-[0.1em] -mr-[0.1em]"/></>}
-    slogan="Build an issue tracker with distributed state."
-    pt={false}
-/>
-</div>
+# React Guide

-## About this guide
+This is a step-by-step tutorial where we'll build an issue tracker app using React.

-You might notice that right now, this guide is the only form of documentation there is for Jazz.
-Over time, we're hoping to introduce independent doc sections for every concept in Jazz, but right now this works as:
-
- a quickstart guide
- a reference for the concepts in Jazz (ordered from simple & most important to more advanced)
- a tutorial that makes you build a full app (that you can use as a base)
-
-Plus, if you get stuck or you have questions, [ask us on Discord](https://discord.gg/utDMjHYg42)
-and we'll know exactly where you're at.
+You'll learn how to set up a Jazz app, use Jazz Cloud for sync and storage, create and manipulate data using
+Collaborative Values (CoValues), build a UI and subscribe to changes, set permissions, and send invites.

 ## Project Setup

--- a/homepage/homepage/app/docs/[...slug]/page.tsx
+++ b/homepage/homepage/app/docs/[...slug]/page.tsx
@@ -1,25 +1,61 @@
-import { clsx } from "clsx";
-import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";
-import type { Toc } from '@stefanprobst/rehype-extract-toc'
+import fs from "fs";
+import path from "path";
 import { TableOfContents } from "@/components/docs/TableOfContents";
+import type { Toc } from "@stefanprobst/rehype-extract-toc";
+import { Prose } from "gcmp-design-system/src/app/components/molecules/Prose";

-export default async function Page({params}: {params: {slug: string | string[]}}) {
-  return (
-    <>
+export default async function Page({ params }: { params: { slug: string[] } }) {
+  const slugPath = params.slug.join("/");
+  try {
+    const { default: Content, tableOfContents } = await import(
+      `./${slugPath}.mdx`
+    );
+
+    return (
+      <>
+        <Prose className="overflow-x-hidden lg:flex-1 pt-6">
+          <Content />
+        </Prose>
+        {tableOfContents && <TableOfContents items={tableOfContents as Toc} />}
+      </>
+    );
+  } catch (error) {
+    console.error("Error loading MDX file:" + slugPath, error);
+    return (
      <Prose className="overflow-x-hidden lg:flex-1">
-        <Content name={Array.isArray(params.slug) ? params.slug.join("/") : params.slug}/>
+        <h3>Error loading page: {slugPath}</h3>
      </Prose>
-      <ToC name={Array.isArray(params.slug) ? params.slug.join("/") : params.slug}/>
-    </>
-  );
+    );
+  }
 }

-async function Content({name}: {name: string}) {
-  const Inner = (await import(`./${name}.mdx`)).default;
-  return <Inner />;
-}
+// https://nextjs.org/docs/app/api-reference/functions/generate-static-params
+export const dynamicParams = false;
+export const dynamic = "force-static";

-async function ToC({name}: {name: string}) {
-  const tableOfContents = (await import(`./${name}.mdx`)).tableOfContents as Toc
-  return <TableOfContents items={tableOfContents} />;
+export async function generateStaticParams() {
+  const docsDir = path.join(process.cwd(), "app/docs/[...slug]");
+  const getAllMdxPaths = (dir: string, basePath = ""): string[] => {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    const paths: string[] = [];
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      const relativePath = path.join(basePath, entry.name);
+
+      if (entry.isDirectory()) {
+        paths.push(...getAllMdxPaths(fullPath, relativePath));
+      } else if (entry.isFile() && entry.name.endsWith(".mdx")) {
+        paths.push(relativePath.replace(/\.mdx$/, ""));
+      }
+    }
+
+    return paths;
+  };
+
+  const paths = getAllMdxPaths(docsDir).map((slug) => ({
+    slug: slug.split("/"),
+  }));
+
+  return paths;
 }
--- a/homepage/homepage/app/docs/[...slug]/project-setup/vue.mdx
+++ b/homepage/homepage/app/docs/[...slug]/project-setup/vue.mdx
@@ -0,0 +1,262 @@
+import { CodeGroup } from "@/components/forMdx";
+
+# VueJS Demo Todo App Guide
+
+This guide provides step-by-step instructions for setting up and running a Jazz-powered Todo application using VueJS.
+
+See the full example [here](https://github.com/gardencmp/jazz/tree/main/examples/todo-vue).
+
+---
+
+## Setup
+
+### Create a New App
+
+Run the following command to create a new VueJS application:
+
+<CodeGroup>
+```bash
+❯ pnpm create vue@latest
+
+✔ Project name: … vue-setup-guide
+✔ Add TypeScript? … Yes
+✔ Add JSX Support? … No
+✔ Add Vue Router for Single Page Application development? … Yes
+✔ Add Pinia for state management? … No
+✔ Add Vitest for Unit Testing? … No
+✔ Add an End-to-End Testing Solution? › No
+✔ Add ESLint for code quality? › Yes
+✔ Add Prettier for code formatting? … Yes
+```
+</CodeGroup>
+
+### Install Dependencies
+
+Run the following command to install Jazz libraries:
+
+<CodeGroup>
+```bash
+pnpm install jazz-tools jazz-browser jazz-vue
+```
+</CodeGroup>
+
+### Implement `schema.ts`
+
+Define the schema for your application.
+
+Example schema inside `src/schema.ts` for a todo app:
+
+<CodeGroup>
+```typescript
+import { Account, CoList, CoMap, Group, Profile, co } from "jazz-tools";
+
+export class ToDoItem extends CoMap {
+  name = co.string;
+  completed = co.boolean;
+}
+
+export class ToDoList extends CoList.Of(co.ref(ToDoItem)) {}
+
+export class Folder extends CoMap {
+  name = co.string;
+  items = co.ref(ToDoList);
+}
+
+export class FolderList extends CoList.Of(co.ref(Folder)) {}
+
+export class ToDoAccountRoot extends CoMap {
+  folders = co.ref(FolderList);
+}
+
+export class ToDoAccount extends Account {
+  profile = co.ref(Profile);
+  root = co.ref(ToDoAccountRoot);
+
+  migrate(this: ToDoAccount, creationProps?: { name: string }) {
+    super.migrate(creationProps);
+    if (!this._refs.root) {
+      const group = Group.create({ owner: this });
+      const firstFolder = Folder.create(
+        {
+          name: "Default",
+          items: ToDoList.create([], { owner: group }),
+        },
+        { owner: group },
+      );
+
+
+      this.root = ToDoAccountRoot.create(
+        {
+          folders: FolderList.create([firstFolder], {
+            owner: this,
+          }),
+        },
+        { owner: this },
+      );
+    }
+  }
+}
+```
+</CodeGroup>
+
+
+### Refactor `main.ts`
+
+Update the `src/main.ts` file to integrate Jazz:
+
+<CodeGroup>
+```typescript
+import "./assets/main.css";
+import { DemoAuthBasicUI, createJazzVueApp, useDemoAuth } from "jazz-vue";
+import { createApp, defineComponent, h } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import { ToDoAccount } from "./schema";
+
+const Jazz = createJazzVueApp<ToDoAccount>({ AccountSchema: ToDoAccount });
+export const { useAccount, useCoState } = Jazz;
+const { JazzProvider } = Jazz;
+
+const RootComponent = defineComponent({
+  name: "RootComponent",
+  setup() {
+    const { authMethod, state } = useDemoAuth();
+
+    return () => [
+      h(
+        JazzProvider,
+        {
+          auth: authMethod.value,
+          peer: "wss://mesh.jazz.tools/?key=vue-todo-example-jazz@gcmp.io",
+        },
+        {
+          default: () => h(App),
+        },
+      ),
+
+      state.state !== "signedIn" &&
+        h(DemoAuthBasicUI, {
+          appName: "Jazz Vue Todo",
+          state,
+        }),
+    ];
+  },
+});
+
+const app = createApp(RootComponent);
+
+app.use(router);
+
+app.mount("#app");
+```
+</CodeGroup>
+
+### Set up `router/index.ts`:
+
+Create a basic Vue router configuration. For example:
+
+<CodeGroup>
+```typescript
+import { createRouter, createWebHistory } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: "/",
+      name: "Home",
+      component: HomeView,
+    },
+  ],
+});
+
+export default router;
+```
+</CodeGroup>
+
+### Implement `App.vue`
+
+Update the `App.vue` file to include logout functionality:
+
+<CodeGroup>
+```typescript
+<template>
+  <div class="app-container">
+    <header v-if="me" class="app-header">
+      <h1>Todo App</h1>
+      <div class="user-section">
+        <span>{{ me.profile?.name }}</span>
+        <button class="logout-btn" @click="logOut">Log out</button>
+      </div>
+    </header>
+    <main>
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAccount } from "./main";
+
+const { me, logOut } = useAccount();
+</script>
+```
+</CodeGroup>
+
+## Subscribing to a CoValue
+
+Subscribe to a CoValue inside `src/views/HomeView.vue`:
+
+<CodeGroup>
+```typescript
+<script setup lang="ts">
+import { Group, type ID } from "jazz-tools";
+import { ref, toRaw, watch } from "vue";
+import { computed } from "vue";
+import { useAccount, useCoState } from "../main";
+import { Folder, FolderList, ToDoItem, ToDoList } from "../schema";
+
+const { me } = useAccount();
+
+// Computed ID for the folders list
+const computedFoldersId = computed(() => me.value?.root?.folders?.id);
+
+// Load folders and nested values
+const folders = useCoState(FolderList, computedFoldersId, [{ items: [{}] }]);
+```
+</CodeGroup>
+
+See the full example [here](https://github.com/gardencmp/jazz/tree/main/examples/todo-vue).
+
+## Mutating a CoValue
+
+Here's how to create a new folder:
+
+<CodeGroup>
+```typescript
+// continues previous example
+
+const createFolder = async (name: string) => {
+  // Create a group owned by the current user
+  const group = Group.create({ owner: me.value });
+
+  // Create the folder
+  const newFolder = Folder.create(
+    {
+      name,
+      items: ToDoList.create([], { owner: group }),
+    },
+    { owner: group },
+  );
+
+  // Add the folder to the list of folders.
+  // This change is sent to all connected clients and will be synced in real time.
+  folders.value?.push(newFolder);
+  newFolderName.value = "";
+};
+
+```
+</CodeGroup>
+
+See the full example [here](https://github.com/gardencmp/jazz/tree/main/examples/todo-vue).
--- a/homepage/homepage/app/docs/layout.tsx
+++ b/homepage/homepage/app/docs/layout.tsx
@@ -2,8 +2,8 @@ import { DocNav } from "@/components/docs/nav";
 import { clsx } from "clsx";

 export const metadata = {
-  title: "Docs",
-  description: "Jazz Guide & Docs.",
+  title: "Documentation",
+  description: "Jazz guide and documentation.",
 };

 export default function DocsLayout({
@@ -12,12 +12,12 @@ export default function DocsLayout({
  children: React.ReactNode;
 }) {
  return (
-    <div className="container relative grid grid-cols-12 gap-5 py-8">
-      <DocNav />
+    <div className="container relative grid grid-cols-12 gap-5">
+      <DocNav className="py-6" />
      <div
-      className={clsx(
-        "col-span-12 md:col-span-8 lg:col-span-9",
-        "flex justify-center lg:gap-5",
+        className={clsx(
+          "col-span-12 md:col-span-8 lg:col-span-9",
+          "flex justify-center lg:gap-5",
        )}
      >
        {children}
--- a/homepage/homepage/app/docs/(others)/examples/page.tsx
+++ b/homepage/homepage/app/docs/(others)/examples/page.tsx
@@ -3,7 +3,9 @@ import { NextjsLogo } from "@/components/icons/NextjsLogo";
 import { ReactLogo } from "@/components/icons/ReactLogo";
 import { ReactNativeLogo } from "@/components/icons/ReactNativeLogo";
 import { Button } from "gcmp-design-system/src/app/components/atoms/Button";
+import { H2 } from "gcmp-design-system/src/app/components/atoms/Headings";
 import { GappedGrid } from "gcmp-design-system/src/app/components/molecules/GappedGrid";
+import { HeroHeader } from "gcmp-design-system/src/app/components/molecules/HeroHeader";
 import { CloudUploadIcon, FingerprintIcon, KeyRoundIcon } from "lucide-react";

 type Example = {
@@ -55,21 +57,21 @@ const ClerkIllustration = () => (

 const MusicIllustration = () => (
  <div className="flex flex-col items-center justify-center h-full p-8">
-    <div className="py-3 px-4 border border-dashed border-blue dark:border-blue-500 rounded-lg flex gap-2 flex-col items-center">
+    <div className="py-3 px-8 border border-dashed border-blue dark:border-blue-500 rounded-lg flex gap-2 flex-col items-center">
      <CloudUploadIcon
-        size={30}
+        size={40}
        strokeWidth={1.5}
        className="stroke-blue mx-auto dark:stroke-blue-500"
      />
-      <p className="whitespace-nowrap text-xs text-stone-900 dark:text-white">
-        tortured-poets-department.mp3
+      <p className="whitespace-nowrap text-stone-900 dark:text-white">
+        take-five.mp3
      </p>
    </div>
  </div>
 );

 const BookShelfIllustration = () => (
-  <div className="h-full p-6 md:p-5">
+  <div className="h-full max-w-[30rem] mx-auto flex flex-col justify-center p-6 md:p-5">
    <div className="flex justify-between items-baseline">
      <p className="font-display font-medium tracking-tight  text-sm text-stone-900 dark:text-white">
        Your book shelf
@@ -80,7 +82,7 @@ const BookShelfIllustration = () => (
      </p>
    </div>

-    <div className="relative grid grid-cols-3 gap-4 mt-3">
+    <div className="grid grid-cols-3 gap-4 mt-3">
      {["malibu.jpg", "pathless.jpg", "upgrade.jpg"].map((book) => (
        <img
          key={book}
@@ -89,8 +91,6 @@ const BookShelfIllustration = () => (
          className="w-full h-full object-cover rounded-r-md shadow-sm border dark:border-none"
        />
      ))}
-
-      <div className="absolute bottom-0 w-full h-10 bg-gradient-to-t from-white dark:from-stone-925 to-transparent md:hidden" />
    </div>
  </div>
 );
@@ -239,7 +239,7 @@ function Example({ example }: { example: Example }) {
  const githubUrl = `https://github.com/gardencmp/jazz/tree/main/examples/${slug}`;

  return (
-    <div className="border bg-stone-50 shadow-sm p-3 flex flex-col gap-3 rounded-lg md:gap-4 dark:bg-stone-950">
+    <div className="col-span-2 border bg-stone-50 shadow-sm p-3 flex flex-col gap-3 rounded-lg md:gap-4 dark:bg-stone-950">
      <div className="aspect-[16/9] overflow-hidden w-full rounded-md bg-white border dark:bg-stone-925 sm:aspect-[2/1] md:aspect-[3/2]">
        {illustration}
      </div>
@@ -284,22 +284,28 @@ function Example({ example }: { example: Example }) {

 export default function Page() {
  return (
-    <>
-      <h1>Example Apps</h1>
-      {categories.map((category) => (
-        <div className="my-12" key={category.name}>
-          <div className="flex items-center gap-3 mb-5">
-            <category.logo className="h-8 w-8" />
-            <h2 className="my-0">{category.name}</h2>
-          </div>
+    <div className="container flex flex-col gap-6 pb-10 lg:pb-20">
+      <HeroHeader
+        title="Example apps"
+        slogan="Find an example app with code most similar to what you want to build"
+      />

-          <div className="not-prose grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
-            {category.examples.map((example) => (
-              <Example key={example.slug} example={example} />
-            ))}
+      <div className="grid gap-12 lg:gap-20">
+        {categories.map((category) => (
+          <div key={category.name}>
+            <div className="flex items-center gap-3 mb-5">
+              <category.logo className="h-8 w-8" />
+              <H2 className="!mb-0">{category.name}</H2>
+            </div>
+
+            <GappedGrid>
+              {category.examples.map((example) => (
+                <Example key={example.slug} example={example} />
+              ))}
+            </GappedGrid>
          </div>
-        </div>
-      ))}
-    </>
+        ))}
+      </div>
+    </div>
  );
 }
--- a/homepage/homepage/app/layout.tsx
+++ b/homepage/homepage/app/layout.tsx
@@ -8,7 +8,6 @@ import { JazzFooter } from "@/components/footer";
 import { JazzNav } from "@/components/nav";
 import { Analytics } from "@vercel/analytics/react";
 import { SpeedInsights } from "@vercel/speed-insights/next";
-import { clsx } from "clsx";
 import { ThemeProvider } from "gcmp-design-system/src/app/components/molecules/ThemeProvider";

 // If loading a variable font, you don't need to specify the font weight
--- a/homepage/homepage/components/SideNavItem.tsx
+++ b/homepage/homepage/components/SideNavItem.tsx
@@ -27,9 +27,9 @@ export function SideNavItem({
        className={clsx(
          classes,
          href &&
-            "hover:text-black dark:hover:text-stone-200 transition-colors hover:transition-none",
+            "hover:text-stone-900 dark:hover:text-stone-200 transition-colors hover:transition-none",
          {
-            "text-black": path === href,
+            "text-stone-900 dark:text-white": path === href,
          },
        )}
      >
--- a/homepage/homepage/components/docs/TableOfContents.tsx
+++ b/homepage/homepage/components/docs/TableOfContents.tsx
@@ -1,6 +1,6 @@
+import type { Toc, TocEntry } from "@stefanprobst/rehype-extract-toc";
 import { clsx } from "clsx";
 import Link from "next/link";
-import type { Toc, TocEntry } from '@stefanprobst/rehype-extract-toc'

 const TocList = ({ items }: { items: TocEntry[] }) => {
  return (
@@ -27,7 +27,7 @@ export function TableOfContents({
  return (
    <div
      className={clsx(
-        "pl-3 sticky align-start top-[4.75rem] h-[calc(100vh-8rem)] overflow-y-auto overflow-x-hidden hidden md:block",
+        "pl-3 py-6 text-sm sticky align-start top-[4.75rem] w-[16rem] h-[calc(100vh-108px)] overflow-y-auto overflow-x-hidden hidden lg:block",
        className,
      )}
    >
--- a/homepage/homepage/components/docs/nav.tsx
+++ b/homepage/homepage/components/docs/nav.tsx
@@ -16,7 +16,7 @@ export function DocNav({ className }: { className?: string }) {
      className={clsx(
        twMerge(
          "pr-3 md:col-span-4 lg:col-span-3",
-          "sticky align-start top-[4.75rem] h-[calc(100vh-8rem)] overflow-y-auto overflow-x-hidden",
+          "sticky align-start top-[4.75rem] h-[calc(100vh-108px)] overflow-y-auto overflow-x-hidden",
          "hidden md:block",
          className,
        ),
--- a/homepage/homepage/components/nav.tsx
+++ b/homepage/homepage/components/nav.tsx
@@ -47,7 +47,7 @@ export function JazzNav() {
                />
              ),
              title: "Example apps",
-              href: "/docs/examples",
+              href: "/examples",
              description:
                "Demo and source code for example apps built with Jazz.",
            },
--- a/homepage/homepage/lib/docNavigationItems.ts
+++ b/homepage/homepage/lib/docNavigationItems.ts
@@ -38,6 +38,11 @@ export const docNavigationItems = [
        name: "Next.js",
        href: "/docs/project-setup/next",
      },
+      {
+        name: "VueJS",
+        href: "/docs/project-setup/vue",
+        done: 80,
+      },
      {
        name: "Node.JS / Server Workers",
        href: "/docs/project-setup/server-side",
@@ -125,7 +130,7 @@ export const docNavigationItems = [
    items: [
      {
        name: "Example apps",
-        href: "/docs/examples",
+        href: "/examples",
        done: 30,
      },
      {
--- a/homepage/homepage/next.config.mjs
+++ b/homepage/homepage/next.config.mjs
@@ -1,9 +1,9 @@
 import createMDX from "@next/mdx";
+import withToc from "@stefanprobst/rehype-extract-toc";
+import withTocExport from "@stefanprobst/rehype-extract-toc/mdx";
+import rehypeSlug from "rehype-slug";
 import { getHighlighter } from "shiki";
 import { SKIP, visit } from "unist-util-visit";
-import rehypeSlug from "rehype-slug";
-import withToc from "@stefanprobst/rehype-extract-toc"
-import withTocExport from "@stefanprobst/rehype-extract-toc/mdx"

 /** @type {import('next').NextConfig} */
 const nextConfig = {
--- a/homepage/homepage/package.json
+++ b/homepage/homepage/package.json
@@ -12,6 +12,7 @@
  },
  "packageManager": "pnpm@9.1.4",
  "dependencies": {
+    "@headlessui/react": "^2.2.0",
    "@icons-pack/react-simple-icons": "^9.1.0",
    "@mdx-js/loader": "^2.3.0",
    "@mdx-js/react": "^2.3.0",
--- a/homepage/homepage/tsconfig.json
+++ b/homepage/homepage/tsconfig.json
@@ -22,6 +22,12 @@
      "@/*": ["./*"]
    }
  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "mdx.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "mdx.d.ts"
+  ],
  "exclude": ["node_modules"]
 }
--- a/homepage/pnpm-lock.yaml
+++ b/homepage/pnpm-lock.yaml
@@ -169,6 +169,9 @@ importers:

  homepage:
    dependencies:
+      '@headlessui/react':
+        specifier: ^2.2.0
+        version: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
      '@icons-pack/react-simple-icons':
        specifier: ^9.1.0
        version: 9.4.1(react@18.3.1)
--- a/packages/cojson-storage-indexeddb/CHANGELOG.md
+++ b/packages/cojson-storage-indexeddb/CHANGELOG.md
@@ -1,5 +1,11 @@
 # cojson-storage-indexeddb

+## 0.8.22
+
+### Patch Changes
+
+- f6bc8af: Set up a unique peer id for the indexeddb storage
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/cojson-storage-indexeddb/package.json
+++ b/packages/cojson-storage-indexeddb/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cojson-storage-indexeddb",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "main": "dist/index.js",
  "type": "module",
  "types": "src/index.ts",
--- a/packages/jazz-browser-auth-clerk/CHANGELOG.md
+++ b/packages/jazz-browser-auth-clerk/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-browser-media-images

+## 0.8.22
+
+### Patch Changes
+
+- Updated dependencies [f6bc8af]
+  - jazz-browser@0.8.22
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/jazz-browser-auth-clerk/package.json
+++ b/packages/jazz-browser-auth-clerk/package.json
@@ -1,13 +1,13 @@
 {
  "name": "jazz-browser-auth-clerk",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.ts",
  "license": "MIT",
  "dependencies": {
    "cojson": "workspace:0.8.21",
-    "jazz-browser": "workspace:0.8.21",
+    "jazz-browser": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21"
  },
  "scripts": {
--- a/packages/jazz-browser-media-images/CHANGELOG.md
+++ b/packages/jazz-browser-media-images/CHANGELOG.md
@@ -1,5 +1,12 @@
 # jazz-browser-media-images

+## 0.8.22
+
+### Patch Changes
+
+- Updated dependencies [f6bc8af]
+  - jazz-browser@0.8.22
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/jazz-browser-media-images/package.json
+++ b/packages/jazz-browser-media-images/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jazz-browser-media-images",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.ts",
@@ -8,7 +8,7 @@
  "dependencies": {
    "@types/image-blob-reduce": "^4.1.1",
    "image-blob-reduce": "^4.1.0",
-    "jazz-browser": "workspace:0.8.21",
+    "jazz-browser": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21",
    "pica": "^9.0.1",
    "typescript": "^5.3.3"
--- a/packages/jazz-browser/CHANGELOG.md
+++ b/packages/jazz-browser/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-browser

+## 0.8.22
+
+### Patch Changes
+
+- f6bc8af: Reuse the crypto instance between OPFS and the jazz context
+- Updated dependencies [f6bc8af]
+  - cojson-storage-indexeddb@0.8.22
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/jazz-browser/package.json
+++ b/packages/jazz-browser/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jazz-browser",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.ts",
@@ -8,7 +8,7 @@
  "dependencies": {
    "@scure/bip39": "^1.3.0",
    "cojson": "workspace:0.8.21",
-    "cojson-storage-indexeddb": "workspace:0.8.21",
+    "cojson-storage-indexeddb": "workspace:0.8.22",
    "cojson-transport-ws": "workspace:0.8.21",
    "jazz-tools": "workspace:0.8.21",
    "typescript": "^5.3.3"
--- a/packages/jazz-react-auth-clerk/CHANGELOG.md
+++ b/packages/jazz-react-auth-clerk/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-browser-media-images

+## 0.8.22
+
+### Patch Changes
+
+- Updated dependencies [59cc64d]
+  - jazz-react@0.8.22
+  - jazz-browser-auth-clerk@0.8.22
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/jazz-react-auth-clerk/package.json
+++ b/packages/jazz-react-auth-clerk/package.json
@@ -1,14 +1,14 @@
 {
  "name": "jazz-react-auth-clerk",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.tsx",
  "license": "MIT",
  "dependencies": {
    "cojson": "workspace:0.8.21",
-    "jazz-browser-auth-clerk": "workspace:0.8.21",
-    "jazz-react": "workspace:0.8.21",
+    "jazz-browser-auth-clerk": "workspace:0.8.22",
+    "jazz-react": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21"
  },
  "peerDependencies": {
--- a/packages/jazz-react/CHANGELOG.md
+++ b/packages/jazz-react/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-react

+## 0.8.22
+
+### Patch Changes
+
+- 59cc64d: Trigger invite accept on hashchange
+- Updated dependencies [f6bc8af]
+  - jazz-browser@0.8.22
+
 ## 0.8.21

 ### Patch Changes
--- a/packages/jazz-react/package.json
+++ b/packages/jazz-react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jazz-react",
-  "version": "0.8.21",
+  "version": "0.8.22",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.ts",
@@ -8,7 +8,7 @@
  "dependencies": {
    "@scure/bip39": "^1.3.0",
    "cojson": "workspace:0.8.21",
-    "jazz-browser": "workspace:0.8.21",
+    "jazz-browser": "workspace:0.8.22",
    "jazz-tools": "workspace:0.8.21"
  },
  "devDependencies": {
--- a/packages/jazz-react/src/index.tsx
+++ b/packages/jazz-react/src/index.tsx
@@ -240,19 +240,25 @@ export function createJazzReactApp<Acc extends Account>({
    }

    useEffect(() => {
-      if (!context) return;
-
-      const result = consumeInviteLinkFromWindowLocation({
-        as: context.me,
-        invitedObjectSchema,
-        forValueHint,
-      });
-
-      result
-        .then((result) => result && onAccept(result?.valueID))
-        .catch((e) => {
-          console.error("Failed to accept invite", e);
+      const handleInvite = () => {
+        const result = consumeInviteLinkFromWindowLocation({
+          as: context.me,
+          invitedObjectSchema,
+          forValueHint,
        });
+
+        result
+          .then((result) => result && onAccept(result?.valueID))
+          .catch((e) => {
+            console.error("Failed to accept invite", e);
+          });
+      };
+
+      handleInvite();
+
+      window.addEventListener("hashchange", handleInvite);
+
+      return () => window.removeEventListener("hashchange", handleInvite);
    }, [onAccept]);
  }

--- a/packages/jazz-vue/CHANGELOG.md
+++ b/packages/jazz-vue/CHANGELOG.md
@@ -1,5 +1,13 @@
 # jazz-react

+## 0.8.12
+
+### Patch Changes
+
+- a734530: fix useCoState reactivity
+- Updated dependencies [f6bc8af]
+  - jazz-browser@0.8.22
+
 ## 0.8.11

 ### Patch Changes
--- a/packages/jazz-vue/package.json
+++ b/packages/jazz-vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "jazz-vue",
-  "version": "0.8.11",
+  "version": "0.8.12",
  "type": "module",
  "main": "dist/index.js",
  "types": "src/index.ts",
--- a/packages/jazz-vue/src/createJazzVueApp.ts
+++ b/packages/jazz-vue/src/createJazzVueApp.ts
@@ -19,6 +19,7 @@ import {
 import {
  Component,
  ComputedRef,
+  MaybeRef,
  PropType,
  Ref,
  ShallowRef,
@@ -31,6 +32,7 @@ import {
  ref,
  shallowRef,
  toRaw,
+  unref,
  watch,
 } from "vue";

@@ -56,7 +58,7 @@ export interface JazzVueApp<Acc extends Account> {

  useCoState<V extends CoValue, D>(
    Schema: CoValueClass<V>,
-    id: ID<V> | undefined,
+    id: MaybeRef<ID<V> | undefined>,
    depth?: D & DepthsIn<V>,
  ): Ref<DeeplyLoaded<V, D> | undefined>;

@@ -181,9 +183,13 @@ export function createJazzVueApp<Acc extends Account>({
      );
    }

+    const contextMe = computed(() =>
+      "me" in context.value ? context.value.me : undefined,
+    );
+
    const me = useCoState<Acc, D>(
-      context.value.me.constructor as CoValueClass<Acc>,
-      context.value.me.id,
+      contextMe.value?.constructor as CoValueClass<Acc>,
+      contextMe.value?.id,
      depth,
    );

@@ -219,11 +225,13 @@ export function createJazzVueApp<Acc extends Account>({
      throw new Error("useAccountOrGuest must be used within a JazzProvider");
    }

-    const contextMe = "me" in context.value ? context.value.me : undefined;
+    const contextMe = computed(() =>
+      "me" in context.value ? context.value.me : undefined,
+    );

    const me = useCoState<Acc, D>(
-      contextMe?.constructor as CoValueClass<Acc>,
-      contextMe?.id,
+      contextMe.value?.constructor as CoValueClass<Acc>,
+      contextMe.value?.id,
      depth,
    );

@@ -244,7 +252,7 @@ export function createJazzVueApp<Acc extends Account>({

  function useCoState<V extends CoValue, D>(
    Schema: CoValueClass<V>,
-    id: ID<V> | undefined,
+    id: MaybeRef<ID<V> | undefined>,
    depth: D & DepthsIn<V> = [] as D & DepthsIn<V>,
  ): Ref<DeeplyLoaded<V, D> | undefined> {
    const state: ShallowRef<DeeplyLoaded<V, D> | undefined> =
@@ -258,15 +266,16 @@ export function createJazzVueApp<Acc extends Account>({
    let unsubscribe: (() => void) | undefined;

    watch(
-      [() => id, () => context, () => Schema, () => depth],
+      [() => unref(id), () => context, () => Schema, () => depth],
      () => {
        if (unsubscribe) unsubscribe();

-        if (!id) return;
+        const idValue = unref(id);
+        if (!idValue) return;

        unsubscribe = subscribeToCoValue(
          Schema,
-          id,
+          idValue,
          "me" in context.value
            ? toRaw(context.value.me)
            : toRaw(context.value.guest),
@@ -276,7 +285,7 @@ export function createJazzVueApp<Acc extends Account>({
          },
        );
      },
-      { immediate: true },
+      { deep: true, immediate: true },
    );

    onUnmounted(() => {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,7 +32,7 @@ importers:
        version: 1.8.2
      ts-node:
        specifier: ^10.9.1
-        version: 10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2)
+        version: 10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2)
      turbo:
        specifier: ^1.11.2
        version: 1.11.2
@@ -55,7 +55,7 @@ importers:
        specifier: ^3.0.1
        version: 3.0.1
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -150,10 +150,10 @@ importers:
        specifier: ^2.0.0
        version: 2.0.0
      jazz-browser-media-images:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-browser-media-images
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -182,7 +182,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2))
      typescript:
        specifier: ^5.3.3
        version: 5.6.2
@@ -211,7 +211,7 @@ importers:
        specifier: workspace:0.2.1
        version: link:../../packages/hash-slash
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -242,7 +242,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      uniqolor:
        specifier: ^1.1.0
        version: 1.1.1
@@ -273,7 +273,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -308,10 +308,10 @@ importers:
        specifier: workspace:0.2.1
        version: link:../../packages/hash-slash
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-react-auth-clerk:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react-auth-clerk
      jazz-tools:
        specifier: workspace:0.8.21
@@ -342,7 +342,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      uniqolor:
        specifier: ^1.1.0
        version: 1.1.1
@@ -367,7 +367,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -433,7 +433,7 @@ importers:
        version: link:../../packages/jazz-tools
      nativewind:
        specifier: ^2.0.11
-        version: 2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      react:
        specifier: 18.3.1
        version: 18.3.1
@@ -476,7 +476,7 @@ importers:
        version: 18.2.79
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -542,7 +542,7 @@ importers:
        version: 6.3.1(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2)))
      expo-router:
        specifier: ~3.5.23
-        version: 3.5.23(gxmcwa4qdc6bvqs2lj3c6b64ki)
+        version: 3.5.23(expo-constants@16.0.2(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))))(expo-linking@6.3.1(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))))(expo-modules-autolinking@1.11.3)(expo-status-bar@1.12.1)(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(react-native-reanimated@3.10.1(@babel/core@7.25.2)(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native-safe-area-context@4.10.5(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native-screens@3.31.1(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)(typescript@5.3.3)
      expo-secure-store:
        specifier: ~13.0.2
        version: 13.0.2(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2)))
@@ -572,7 +572,7 @@ importers:
        version: link:../../packages/jazz-tools
      nativewind:
        specifier: ^2.0.11
-        version: 2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      react:
        specifier: 18.3.1
        version: 18.3.1
@@ -636,16 +636,16 @@ importers:
        version: 18.3.0
      jest:
        specifier: ^29.2.1
-        version: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      jest-expo:
        specifier: ~51.0.3
-        version: 51.0.4(@babel/core@7.25.2)(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))(react@18.3.1)
+        version: 51.0.4(@babel/core@7.25.2)(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))(react@18.3.1)
      react-test-renderer:
        specifier: 18.2.0
        version: 18.2.0(react@18.3.1)
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -700,7 +700,7 @@ importers:
        version: 8.4.47
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2))
      typescript:
        specifier: ^5.3.3
        version: 5.6.2
@@ -766,7 +766,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      uniqolor:
        specifier: ^1.1.0
        version: 1.1.1
@@ -791,7 +791,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -817,7 +817,7 @@ importers:
        specifier: ^2.0.0
        version: 2.0.0
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -842,7 +842,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
    devDependencies:
      '@playwright/test':
        specifier: ^1.46.1
@@ -864,7 +864,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -916,7 +916,7 @@ importers:
        version: 8.4.47
      tailwindcss:
        specifier: ^3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2))
      typescript:
        specifier: ^5.3.3
        version: 5.6.2
@@ -927,7 +927,7 @@ importers:
  examples/password-manager:
    dependencies:
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -965,7 +965,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -991,10 +991,10 @@ importers:
        specifier: ^2.0.0
        version: 2.0.0
      jazz-browser-media-images:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-browser-media-images
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -1022,7 +1022,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      uniqolor:
        specifier: ^1.1.0
        version: 1.1.1
@@ -1059,7 +1059,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -1090,7 +1090,7 @@ importers:
        specifier: ^2.0.0
        version: 2.0.0
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../../packages/jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -1118,7 +1118,7 @@ importers:
        version: 1.14.0
      tailwindcss-animate:
        specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+        version: 1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      uniqolor:
        specifier: ^1.1.0
        version: 1.1.1
@@ -1143,7 +1143,7 @@ importers:
        version: 8.4.32
      tailwindcss:
        specifier: 3.3.2
-        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      typescript:
        specifier: ^5.3.3
        version: 5.3.3
@@ -1151,6 +1151,70 @@ importers:
        specifier: ^5.0.10
        version: 5.0.10(@types/node@22.5.1)(terser@5.33.0)

+  examples/todo-vue:
+    dependencies:
+      jazz-browser:
+        specifier: workspace:*
+        version: link:../../packages/jazz-browser
+      jazz-tools:
+        specifier: workspace:*
+        version: link:../../packages/jazz-tools
+      jazz-vue:
+        specifier: workspace:*
+        version: link:../../packages/jazz-vue
+      vue:
+        specifier: ^3.5.11
+        version: 3.5.11(typescript@5.6.2)
+      vue-router:
+        specifier: ^4.4.5
+        version: 4.4.5(vue@3.5.11(typescript@5.6.2))
+    devDependencies:
+      '@tsconfig/node20':
+        specifier: ^20.1.4
+        version: 20.1.4
+      '@types/node':
+        specifier: ^22.5.1
+        version: 22.5.1
+      '@vitejs/plugin-vue':
+        specifier: ^5.1.4
+        version: 5.1.4(vite@5.0.10(@types/node@22.5.1)(terser@5.33.0))(vue@3.5.11(typescript@5.6.2))
+      '@vitejs/plugin-vue-jsx':
+        specifier: ^4.0.1
+        version: 4.0.1(vite@5.0.10(@types/node@22.5.1)(terser@5.33.0))(vue@3.5.11(typescript@5.6.2))
+      '@vue/tsconfig':
+        specifier: ^0.5.1
+        version: 0.5.1
+      autoprefixer:
+        specifier: ^10.4.14
+        version: 10.4.20(postcss@8.4.47)
+      eslint:
+        specifier: ^8.46.0
+        version: 8.57.1
+      eslint-plugin-vue:
+        specifier: ^9.28.0
+        version: 9.29.0(eslint@8.57.1)
+      npm-run-all2:
+        specifier: ^6.2.3
+        version: 6.2.3
+      postcss:
+        specifier: ^8.4.27
+        version: 8.4.47
+      tailwindcss:
+        specifier: 3.3.2
+        version: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2))
+      typescript:
+        specifier: ^5.3.3
+        version: 5.6.2
+      vite:
+        specifier: ^5.0.10
+        version: 5.0.10(@types/node@22.5.1)(terser@5.33.0)
+      vite-plugin-vue-devtools:
+        specifier: ^7.4.6
+        version: 7.4.6(rollup@4.24.0)(vite@5.0.10(@types/node@22.5.1)(terser@5.33.0))(vue@3.5.11(typescript@5.6.2))
+      vue-tsc:
+        specifier: ^2.1.6
+        version: 2.1.6(typescript@5.6.2)
+
  packages/cojson:
    dependencies:
      '@hazae41/berith':
@@ -1260,7 +1324,7 @@ importers:
        specifier: workspace:0.8.21
        version: link:../cojson
      cojson-storage-indexeddb:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../cojson-storage-indexeddb
      cojson-transport-ws:
        specifier: workspace:0.8.21
@@ -1278,7 +1342,7 @@ importers:
        specifier: workspace:0.8.21
        version: link:../cojson
      jazz-browser:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../jazz-browser
      jazz-tools:
        specifier: workspace:0.8.21
@@ -1297,7 +1361,7 @@ importers:
        specifier: ^4.1.0
        version: 4.1.0
      jazz-browser:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../jazz-browser
      jazz-tools:
        specifier: workspace:0.8.21
@@ -1344,7 +1408,7 @@ importers:
        specifier: workspace:0.8.21
        version: link:../cojson
      jazz-browser:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../jazz-browser
      jazz-tools:
        specifier: workspace:0.8.21
@@ -1369,10 +1433,10 @@ importers:
        specifier: workspace:0.8.21
        version: link:../cojson
      jazz-browser-auth-clerk:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../jazz-browser-auth-clerk
      jazz-react:
-        specifier: workspace:0.8.21
+        specifier: workspace:0.8.22
        version: link:../jazz-react
      jazz-tools:
        specifier: workspace:0.8.21
@@ -12603,7 +12667,7 @@ snapshots:
      jest-util: 29.7.0
      slash: 3.0.0

-  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))':
+  '@jest/core@29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))':
    dependencies:
      '@jest/console': 29.7.0
      '@jest/reporters': 29.7.0
@@ -12617,7 +12681,7 @@ snapshots:
      exit: 0.1.2
      graceful-fs: 4.2.11
      jest-changed-files: 29.7.0
-      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      jest-haste-map: 29.7.0
      jest-message-util: 29.7.0
      jest-regex-util: 29.6.3
@@ -15517,13 +15581,13 @@ snapshots:
      crc-32: 1.2.2
      readable-stream: 3.6.2

-  create-jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  create-jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
      '@jest/types': 29.6.3
      chalk: 4.1.2
      exit: 0.1.2
      graceful-fs: 4.2.11
-      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      jest-util: 29.7.0
      prompts: 2.4.2
    transitivePeerDependencies:
@@ -16300,8 +16364,8 @@ snapshots:
    dependencies:
      invariant: 2.2.4

-  expo-router@3.5.23(gxmcwa4qdc6bvqs2lj3c6b64ki):
-    dependencies:
+  ? expo-router@3.5.23(expo-constants@16.0.2(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))))(expo-linking@6.3.1(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))))(expo-modules-autolinking@1.11.3)(expo-status-bar@1.12.1)(expo@51.0.37(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2)))(react-native-reanimated@3.10.1(@babel/core@7.25.2)(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native-safe-area-context@4.10.5(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native-screens@3.31.1(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1)(typescript@5.3.3)
+  : dependencies:
      '@expo/metro-runtime': 3.2.3(react-native@0.74.5(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(@types/react@18.2.79)(react@18.3.1))
      '@expo/server': 0.4.4(typescript@5.3.3)
      '@radix-ui/react-slot': 1.0.1(react@18.3.1)
@@ -17305,16 +17369,16 @@ snapshots:
      - babel-plugin-macros
      - supports-color

-  jest-cli@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  jest-cli@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      '@jest/test-result': 29.7.0
      '@jest/types': 29.6.3
      chalk: 4.1.2
-      create-jest: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      create-jest: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      exit: 0.1.2
      import-local: 3.2.0
-      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      jest-config: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      jest-util: 29.7.0
      jest-validate: 29.7.0
      yargs: 17.7.2
@@ -17324,7 +17388,7 @@ snapshots:
      - supports-color
      - ts-node

-  jest-config@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  jest-config@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
      '@babel/core': 7.25.2
      '@jest/test-sequencer': 29.7.0
@@ -17350,7 +17414,7 @@ snapshots:
      strip-json-comments: 3.1.1
    optionalDependencies:
      '@types/node': 22.5.1
-      ts-node: 10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)
+      ts-node: 10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)
    transitivePeerDependencies:
      - babel-plugin-macros
      - supports-color
@@ -17398,7 +17462,7 @@ snapshots:
      jest-mock: 29.7.0
      jest-util: 29.7.0

-  jest-expo@51.0.4(@babel/core@7.25.2)(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))(react@18.3.1):
+  jest-expo@51.0.4(@babel/core@7.25.2)(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))(react@18.3.1):
    dependencies:
      '@expo/config': 9.0.4
      '@expo/json-file': 8.3.3
@@ -17407,7 +17471,7 @@ snapshots:
      find-up: 5.0.0
      jest-environment-jsdom: 29.7.0
      jest-watch-select-projects: 2.0.0
-      jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)))
+      jest-watch-typeahead: 2.2.1(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)))
      json5: 2.2.3
      lodash: 4.17.21
      react-test-renderer: 18.2.0(react@18.3.1)
@@ -17596,11 +17660,11 @@ snapshots:
      chalk: 3.0.0
      prompts: 2.4.2

-  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))):
+  jest-watch-typeahead@2.2.1(jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))):
    dependencies:
      ansi-escapes: 6.2.1
      chalk: 4.1.2
-      jest: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      jest: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      jest-regex-util: 29.6.3
      jest-watcher: 29.7.0
      slash: 5.1.0
@@ -17625,12 +17689,12 @@ snapshots:
      merge-stream: 2.0.0
      supports-color: 8.1.1

-  jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  jest@29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
-      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      '@jest/core': 29.7.0(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      '@jest/types': 29.6.3
      import-local: 3.2.0
-      jest-cli: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      jest-cli: 29.7.0(@types/node@22.5.1)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
    transitivePeerDependencies:
      - '@types/node'
      - babel-plugin-macros
@@ -18421,7 +18485,7 @@ snapshots:

  napi-build-utils@1.0.2: {}

-  nativewind@2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))):
+  nativewind@2.0.11(react@18.3.1)(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))):
    dependencies:
      '@babel/generator': 7.25.6
      '@babel/helper-module-imports': 7.18.6
@@ -18435,7 +18499,7 @@ snapshots:
      postcss-css-variables: 0.18.0(postcss@8.4.47)
      postcss-nested: 5.0.6(postcss@8.4.47)
      react-is: 18.2.0
-      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      use-sync-external-store: 1.2.2(react@18.3.1)
    transitivePeerDependencies:
      - react
@@ -18894,21 +18958,21 @@ snapshots:
      camelcase-css: 2.0.1
      postcss: 8.4.47

-  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
      lilconfig: 3.0.0
      yaml: 2.5.0
    optionalDependencies:
      postcss: 8.4.47
-      ts-node: 10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)
+      ts-node: 10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)

-  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2)):
+  postcss-load-config@4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2)):
    dependencies:
      lilconfig: 3.0.0
      yaml: 2.5.0
    optionalDependencies:
      postcss: 8.4.47
-      ts-node: 10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2)
+      ts-node: 10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2)

  postcss-nested@5.0.6(postcss@8.4.47):
    dependencies:
@@ -20125,11 +20189,11 @@ snapshots:

  tailwind-merge@1.14.0: {}

-  tailwindcss-animate@1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))):
    dependencies:
-      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      tailwindcss: 3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))

-  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3)):
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2
@@ -20148,7 +20212,7 @@ snapshots:
      postcss: 8.4.47
      postcss-import: 15.1.0(postcss@8.4.47)
      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3))
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3))
      postcss-nested: 6.0.1(postcss@8.4.47)
      postcss-selector-parser: 6.0.13
      postcss-value-parser: 4.2.0
@@ -20157,7 +20221,7 @@ snapshots:
    transitivePeerDependencies:
      - ts-node

-  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2)):
+  tailwindcss@3.3.2(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2)):
    dependencies:
      '@alloc/quick-lru': 5.2.0
      arg: 5.0.2
@@ -20176,7 +20240,7 @@ snapshots:
      postcss: 8.4.47
      postcss-import: 15.1.0(postcss@8.4.47)
      postcss-js: 4.0.1(postcss@8.4.47)
-      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2))
+      postcss-load-config: 4.0.2(postcss@8.4.47)(ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2))
      postcss-nested: 6.0.1(postcss@8.4.47)
      postcss-selector-parser: 6.0.13
      postcss-value-parser: 4.2.0
@@ -20341,7 +20405,7 @@ snapshots:

  ts-interface-checker@0.1.13: {}

-  ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.3.3):
+  ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.3.3):
    dependencies:
      '@cspotcode/source-map-support': 0.8.1
      '@tsconfig/node10': 1.0.9
@@ -20362,7 +20426,7 @@ snapshots:
      '@swc/core': 1.7.22(@swc/helpers@0.5.5)
    optional: true

-  ts-node@10.9.2(@swc/core@1.7.22(@swc/helpers@0.5.5))(@types/node@22.5.1)(typescript@5.6.2):
+  ts-node@10.9.2(@swc/core@1.7.22)(@types/node@22.5.1)(typescript@5.6.2):
    dependencies:
      '@cspotcode/source-map-support': 0.8.1
      '@tsconfig/node10': 1.0.9
Author	SHA1	Message	Date
Trisha Lim	b4e31657a0	Fix typo	2024-11-18 12:36:39 +00:00
Trisha Lim	5bb1ad4c42	Move vue up the nav	2024-11-18 12:05:45 +00:00
Trisha Lim	3ed74b6b1d	Write intro in react guide	2024-11-18 12:00:34 +00:00
Trisha Lim	823a343fe1	Rewrite docs intro page	2024-11-18 11:56:29 +00:00
Guido D'Orsi	6610aea708	Merge pull request #761 from gardencmp/changeset-release/main Version Packages	2024-11-15 20:30:51 +01:00
github-actions[bot]	f6b6c01852	Version Packages	2024-11-15 18:40:37 +00:00
Trisha Lim	63f9aa6b97	fix: active route styling on docs	2024-11-15 18:39:20 +00:00
pax-k	822eb22da6	fix(docs): fix github URL reference	2024-11-15 20:22:46 +02:00
Anselm Eickhoff	fdf3c6e93d	Merge pull request #742 from gardencmp/vue-docs Vue docs	2024-11-15 18:06:41 +00:00
Guido D'Orsi	de38161023	Merge pull request #770 from gardencmp/gudorsi-jazz-492 fix(useAcceptInvite): trigger the onAccept callback on hashchange	2024-11-15 18:50:15 +01:00
Guido D'Orsi	59cc64d697	fix(useAcceptInvite): trigger the onAccept callback on hashchange	2024-11-15 18:33:27 +01:00
pax-k	55c249834a	chore(docs): cleanup	2024-11-15 19:26:16 +02:00
pax-k	dd189abd4a	chore: pnpm lock	2024-11-15 19:16:32 +02:00
pax-k	df1a8e9c99	feat: vue docs	2024-11-15 19:13:19 +02:00
pax-k	259467ac3f	Merge branch 'main' into vue-docs	2024-11-15 19:09:34 +02:00
Anselm Eickhoff	9a93ab2476	Merge pull request #767 from gardencmp/aeplay-jazz-447 Implement dynamic tables of content	2024-11-15 17:02:39 +00:00
Anselm	337272bbdc	Merge branch 'main' into aeplay-jazz-447	2024-11-15 16:56:36 +00:00
pax-k	464ef7d9c3	chore: cleanup	2024-11-15 18:50:27 +02:00
pax-k	8727089654	Merge branch 'aeplay-jazz-447' of https://github.com/gardencmp/jazz into aeplay-jazz-447	2024-11-15 18:45:57 +02:00
pax-k	753bceddb3	fix: SSG for docs	2024-11-15 18:44:47 +02:00
Trisha Lim	8202996108	fix: TOC grows too wide if text is long	2024-11-15 16:31:21 +00:00
Anselm Eickhoff	e16836becc	Merge pull request #765 from gardencmp/trishalim-jazz-480 Move examples page outside of docs	2024-11-15 15:21:06 +00:00
Trisha Lim	134a101a52	Center align book app thumbnail	2024-11-15 14:11:12 +00:00
Trisha Lim	3fc6030776	Update music player thumbnail	2024-11-15 14:08:40 +00:00
Trisha Lim	8c9e807c19	Move examples page outside of docs	2024-11-15 12:07:42 +00:00
Trisha Lim	e25e4080c7	Reduce large prose font size	2024-11-15 12:04:17 +00:00
pax	df359ab6dd	Update selfish-wolves-shout.md	2024-11-14 17:01:28 +02:00
pax-k	1fe74be8af	fix(jazz-vue): useCoState accepts id as either a ref or a plain value	2024-11-13 12:47:05 +02:00
pax-k	376032f54c	chore: cleanup	2024-11-13 11:39:23 +02:00
pax-k	d27cff5c67	feat(docs): added VueJS docs	2024-11-12 20:41:53 +02:00
pax-k	a734530cc3	chore: added changeset	2024-11-12 19:55:58 +02:00
pax-k	cc51926d14	chore: biome fix	2024-11-12 19:53:52 +02:00
pax-k	fce808cc48	fix(chat-vue): pass computed(id) to useCoState	2024-11-12 19:37:49 +02:00
pax-k	4a9217eb25	fix(jazz-vue): useCoState reactive to id	2024-11-12 19:36:46 +02:00
pax-k	69df98f4fa	feat(todo-vue): implemented a Todo demo app for jazz-vue	2024-11-12 19:35:59 +02:00