{"_id":"@binary-signal/electric-sql-vue","name":"@binary-signal/electric-sql-vue","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@binary-signal/electric-sql-vue","version":"0.1.0","description":"Vue 3 composables for Electric SQL — reactive shape subscriptions with automatic sync","keywords":["composable","electric-sql","reactive","real-time","sync","vue"],"homepage":"https://github.com/binary-signal/electric-sql-vue","bugs":{"url":"https://github.com/binary-signal/electric-sql-vue/issues"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/binary-signal/electric-sql-vue.git"},"type":"module","main":"./dist/index.cjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"}},"publishConfig":{"access":"public"},"devDependencies":{"@electric-sql/client":"^1.0.0","@vitejs/plugin-vue":"^6.0.0","@vue/test-utils":"^2.4.0","jsdom":"^29.0.2","oxfmt":"^0.45.0","oxlint":"^1.60.0","typescript":"^5.7.0","vite":"^8.0.0","vite-plugin-dts":"^4.0.0","vitest":"^4.1.4","vue":"^3.5.0"},"peerDependencies":{"@electric-sql/client":"^1.0.0","vue":">=3.3.0"},"scripts":{"dev":"vite --config playground/vite.config.ts","build":"vite build","test":"vitest","lint":"oxlint src/","fmt":"oxfmt","fmt:check":"oxfmt --check"},"_id":"@binary-signal/electric-sql-vue@0.1.0","_integrity":"sha512-VLnTdbCiBYwQgqzyw+5m5vmllX5kXLm5XTAiSwohG6uPPErJDV2h2vrjQG2BnXo/1dfUnY+9tZBNHza1cZSZ6A==","_resolved":"/private/var/folders/lb/18yqhf410d19krjw70pcj4ym0000gn/T/f1ed96c71d048592bc834e8f0b5dc1c9/binary-signal-electric-sql-vue-0.1.0.tgz","_from":"file:binary-signal-electric-sql-vue-0.1.0.tgz","_nodeVersion":"25.6.1","_npmVersion":"11.9.0","dist":{"integrity":"sha512-VLnTdbCiBYwQgqzyw+5m5vmllX5kXLm5XTAiSwohG6uPPErJDV2h2vrjQG2BnXo/1dfUnY+9tZBNHza1cZSZ6A==","shasum":"ff45bc72beff5aebbe8a28afbf21f512947fe0d3","tarball":"https://registry.npmjs.org/@binary-signal/electric-sql-vue/-/electric-sql-vue-0.1.0.tgz","fileCount":6,"unpackedSize":12214,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGno3Hgjw2+pFqspLGoCSrkNCcVAUKiTHpKPTug4ZJoBAiEApCJv2epUlXsJK6vyWrBWtpSf7jWQWR+aMOVKBEGdpOw="}]},"_npmUser":{"name":"binary-signal","email":"arrest-twos5n@icloud.com"},"directories":{},"maintainers":[{"name":"binary-signal","email":"arrest-twos5n@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/electric-sql-vue_0.1.0_1776685425512_0.9459292281339533"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-20T11:43:45.359Z","0.1.0":"2026-04-20T11:43:45.675Z","modified":"2026-04-20T11:43:45.894Z"},"maintainers":[{"name":"binary-signal","email":"arrest-twos5n@icloud.com"}],"description":"Vue 3 composables for Electric SQL — reactive shape subscriptions with automatic sync","homepage":"https://github.com/binary-signal/electric-sql-vue","keywords":["composable","electric-sql","reactive","real-time","sync","vue"],"repository":{"type":"git","url":"git+https://github.com/binary-signal/electric-sql-vue.git"},"bugs":{"url":"https://github.com/binary-signal/electric-sql-vue/issues"},"license":"MIT","readme":"# @binary-signal/electric-sql-vue\n\nVue 3 composables for [Electric SQL](https://electric-sql.com). Provides reactive bindings to Electric shapes with\nautomatic sync, caching, and cleanup.\n\n## Install\n\n```bash\npnpm add @binary-signal/electric-sql-vue @electric-sql/client\n```\n\n## Usage\n\n```vue\n<script setup lang=\"ts\">\nimport { ref } from \"vue\";\nimport { useShape } from \"@binary-signal/electric-sql-vue\";\n\nconst { data, isLoading, error } = useShape({\n  url: \"http://localhost:3000/v1/shape\",\n  params: { table: \"items\" },\n});\n</script>\n\n<template>\n  <div v-if=\"isLoading\">Loading...</div>\n  <div v-else-if=\"error\">Error: {{ error }}</div>\n  <ul v-else>\n    <li v-for=\"item in data\" :key=\"item.id\">{{ item.name }}</li>\n  </ul>\n</template>\n```\n\n### Reactive options\n\nPass a getter to automatically reconnect when parameters change:\n\n```typescript\nconst filter = ref(\"\");\n\nconst { data } = useShape(() => ({\n  url: \"http://localhost:3000/v1/shape\",\n  params: {\n    table: \"items\",\n    where: `name LIKE '%${filter.value}%'`,\n  },\n}));\n```\n\n### Plugin (app-level config)\n\nUse `createElectric` to provide a base URL and default headers to all `useShape` calls:\n\n```typescript\n// main.ts\nimport { createApp } from \"vue\";\nimport { createElectric } from \"@binary-signal/electric-sql-vue\";\nimport App from \"./App.vue\";\n\nconst app = createApp(App);\n\napp.use(\n  createElectric({\n    baseUrl: \"http://localhost:3000\",\n    headers: { Authorization: \"Bearer token123\" },\n  }),\n);\n\napp.mount(\"#app\");\n```\n\nComponents can then omit the `url` — it's inherited from the plugin:\n\n```vue\n<script setup lang=\"ts\">\nimport { useShape } from \"@binary-signal/electric-sql-vue\";\n\n// No url needed — inferred as baseUrl + '/v1/shape'\nconst { data } = useShape({ params: { table: \"items\" } });\n</script>\n```\n\nPer-call options override plugin defaults (headers are merged, per-call wins).\n\n### Shallow reactivity\n\nBy default, `data` uses `shallowRef` for performance (Electric replaces the full array on sync). Opt into deep\nreactivity if needed:\n\n```typescript\nconst { data } = useShape(options, { shallow: false });\n```\n\n## API\n\n### `useShape<T>(options, composableOptions?)`\n\n| Return         | Type                         | Description                     |\n| -------------- | ---------------------------- | ------------------------------- |\n| `data`         | `ShallowRef<T[]>`            | Current rows                    |\n| `isLoading`    | `Ref<boolean>`               | True during initial fetch       |\n| `error`        | `ShallowRef<Error \\| false>` | Error or false                  |\n| `isError`      | `Ref<boolean>`               | True if error state             |\n| `lastSyncedAt` | `Ref<number \\| undefined>`   | Unix timestamp of last sync     |\n| `shape`        | `ShallowRef<Shape<T>>`       | Underlying Shape instance       |\n| `stream`       | `ShallowRef<ShapeStream<T>>` | Underlying ShapeStream instance |\n\n**Options:** `MaybeRefOrGetter<ShapeStreamOptions<T>>` — accepts a plain object, ref, or getter function.\n\n**Composable options:** `{ shallow?: boolean }` — default `true`.\n\n### Utilities\n\n```typescript\nimport { getShapeStream, getShape, preloadShape } from \"@binary-signal/electric-sql-vue\";\n```\n\n- `getShapeStream(options)` — get or create a cached ShapeStream\n- `getShape(stream)` — get or create a cached Shape from a stream\n- `preloadShape(options)` — preload shape data (useful for SSR)\n\n## Requirements\n\n- Vue 3.3+\n- `@electric-sql/client` ^1.0.0\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-83eb9ba3686ebcc77f9c2f33614f50e3"}