@supabase-community/vue-supabase 1.0.0 → 3.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Supabase
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,157 @@
+# @supabase-community/vue-supabase
+
+This package provides a typed wrapper around the official Supabase JavaScript client for Vue 3 applications. It keeps the API close to the official SDK so you can use `supabase.auth`, `supabase.from`, and other features directly.
+
+_This package is aimed to work with modern Vue 3. To use it with Vue 2, check out https://github.com/supabase-community/vue-supabase/tree/v2.3.0_
+
+## Features
+
+- Vue 3 composable `useSupabaseClient`
+- Authentication support
+- Use supabase-js isomorphic client
+- TypeScript support
+
+## Getting started
+
+1. Install the plugin
+
+```bash
+npm install @supabase-community/vue-supabase
+```
+
+2. Add required environment variables:
+
+```bash
+# .env
+VITE_SUPABASE_URL="https://example.supabase.co"
+VITE_SUPABASE_ANON_KEY="<your_publishable_key>"
+```
+
+3. Register a client:
+
+```ts
+// main.ts
+import { useSupabaseClient } from "@supabase-community/vue-supabase";
+
+const supabase = useSupabaseClient({
+  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
+  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
+});
+```
+
+4. Use the client in your Vue app
+
+```ts
+// App.vue
+<script setup lang="ts">
+import { useSupabaseClient } from "@supabase-community/vue-supabase";
+
+const supabase = useSupabaseClient();
+const { data, error } = await supabase.from("profiles").select("*");
+</script>
+
+<template>
+  <ul>
+    <li v-for="profile in data" :key="profile.id">
+      {{ profile }}
+    </li>
+  </ul>
+</template>
+```
+
+And that's it! You are good to go!
+
+## Advanced
+
+This section covers a few common advanced patterns that work naturally with the composable.
+
+### Realtime
+
+Realtime subscriptions work directly through the Supabase client, so you can react to database changes in your Vue app.
+
+```ts
+const supabase = useSupabaseClient();
+
+const channel = supabase.channel("profiles-updates");
+
+channel
+  .on(
+    "postgres_changes",
+    { event: "*", schema: "public", table: "profiles" },
+    payload => {
+      console.log("Change received:", payload);
+    }
+  )
+  .subscribe();
+```
+
+### TypeScript
+
+You can either define your own local types or generate them from your Supabase project with the CLI. The generated types are especially useful when your schema evolves over time.
+
+Local type registration:
+
+```ts
+import { useSupabaseClient } from "@supabase-community/vue-supabase";
+
+interface Database {
+  public: {
+    Tables: {
+      profiles: {
+        Row: { id: string; name: string | null };
+        Insert: { id?: string; name?: string | null };
+        Update: { name?: string | null };
+        Relationships: [];
+      };
+    };
+  };
+}
+
+const supabase = useSupabaseClient<Database>({
+  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
+  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
+});
+```
+
+Generate types from the Supabase CLI:
+
+```bash
+npx supabase login
+npx supabase gen types typescript --project-id <project-id> --schema public > src/types/supabase.ts
+```
+
+Then use the generated types in your app:
+
+```ts
+import { useSupabaseClient } from "@supabase-community/vue-supabase";
+import type { Database } from "./types/supabase";
+
+const supabase = useSupabaseClient<Database>({
+  supabaseUrl: import.meta.env.VITE_SUPABASE_URL,
+  supabaseKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
+});
+```
+
+### Auth
+
+Auth stays close to the official Supabase client API and works the same way as in the core SDK.
+
+```ts
+const supabase = useSupabaseClient();
+
+await supabase.auth.signInWithPassword({
+  email: "user@example.com",
+  password: "password",
+});
+```
+
+## Development
+
+1. Clone this repository.
+2. Install dependencies using `npm install`.
+3. Build the package using `npm run build`.
+4. Launch the playground using `npm run dev`.
+
+## License
+
+[MIT License](./LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { useSupabaseClient } from "./useSupabaseClient";
+export type { UseSupabaseClientOptions } from "./types";
+export { getSupabaseClient, resetSupabaseClient, setSupabaseClient, } from "./state";
+export type { SupabaseClient, SupabaseClientOptions, } from "@supabase/supabase-js";

package/dist/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setSupabaseClient = exports.resetSupabaseClient = exports.getSupabaseClient = exports.useSupabaseClient = void 0;
+var useSupabaseClient_1 = require("./useSupabaseClient");
+Object.defineProperty(exports, "useSupabaseClient", { enumerable: true, get: function () { return useSupabaseClient_1.useSupabaseClient; } });
+var state_1 = require("./state");
+Object.defineProperty(exports, "getSupabaseClient", { enumerable: true, get: function () { return state_1.getSupabaseClient; } });
+Object.defineProperty(exports, "resetSupabaseClient", { enumerable: true, get: function () { return state_1.resetSupabaseClient; } });
+Object.defineProperty(exports, "setSupabaseClient", { enumerable: true, get: function () { return state_1.setSupabaseClient; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;AAAA,yDAAwD;AAA/C,sHAAA,iBAAiB,OAAA;AAE1B,iCAIiB;AAHf,0GAAA,iBAAiB,OAAA;AACjB,4GAAA,mBAAmB,OAAA;AACnB,0GAAA,iBAAiB,OAAA"}

package/dist/state.d.ts

@@ -0,0 +1,5 @@
+import { createClient, type SupabaseClient } from "@supabase/supabase-js";
+export declare function setSupabaseClient<Database>(client: SupabaseClient<Database>): void;
+export declare function getSupabaseClient<Database = Record<string, never>>(): SupabaseClient<Database> | null;
+export declare function resetSupabaseClient(): void;
+export declare function createSupabaseClientFromConfig<Database = Record<string, never>>(supabaseUrl: string, supabaseKey: string, options?: Parameters<typeof createClient>[2]): SupabaseClient<Database>;

package/dist/state.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setSupabaseClient = setSupabaseClient;
+exports.getSupabaseClient = getSupabaseClient;
+exports.resetSupabaseClient = resetSupabaseClient;
+exports.createSupabaseClientFromConfig = createSupabaseClientFromConfig;
+const supabase_js_1 = require("@supabase/supabase-js");
+let sharedClient = null;
+function setSupabaseClient(client) {
+    sharedClient = client;
+}
+function getSupabaseClient() {
+    return sharedClient;
+}
+function resetSupabaseClient() {
+    sharedClient = null;
+}
+function createSupabaseClientFromConfig(supabaseUrl, supabaseKey, options) {
+    return (0, supabase_js_1.createClient)(supabaseUrl, supabaseKey, options);
+}
+//# sourceMappingURL=state.js.map

package/dist/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../src/state.ts"],"names":[],"mappings":";;AAIA,8CAIC;AAED,8CAIC;AAED,kDAEC;AAED,wEAQC;AA5BD,uDAA0E;AAE1E,IAAI,YAAY,GAAY,IAAI,CAAC;AAEjC,SAAgB,iBAAiB,CAC/B,MAAgC;IAEhC,YAAY,GAAG,MAAM,CAAC;AACxB,CAAC;AAED,SAAgB,iBAAiB;IAG/B,OAAO,YAA+C,CAAC;AACzD,CAAC;AAED,SAAgB,mBAAmB;IACjC,YAAY,GAAG,IAAI,CAAC;AACtB,CAAC;AAED,SAAgB,8BAA8B,CAG5C,WAAmB,EACnB,WAAmB,EACnB,OAA4C;IAE5C,OAAO,IAAA,0BAAY,EAAW,WAAW,EAAE,WAAW,EAAE,OAAO,CAAC,CAAC;AACnE,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,22 @@
+import type { SupabaseClient } from "@supabase/supabase-js";
+/**
+ * Options for initializing a shared Supabase client via the composable.
+ */
+export interface UseSupabaseClientOptions<Database = Record<string, never>> {
+    /**
+     * Reuse an existing Supabase client instance.
+     */
+    client?: SupabaseClient<Database>;
+    /**
+     * Supabase project URL.
+     */
+    supabaseUrl?: string;
+    /**
+     * Supabase anonymous/service key.
+     */
+    supabaseKey?: string;
+    /**
+     * Optional client options forwarded to Supabase JS.
+     */
+    options?: Parameters<typeof import("@supabase/supabase-js").createClient>[2];
+}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/useSupabaseClient.d.ts

@@ -0,0 +1,10 @@
+import type { SupabaseClient } from "@supabase/supabase-js";
+import type { UseSupabaseClientOptions } from "./types";
+/**
+ * Returns a shared Supabase client for Vue 3 apps.
+ *
+ * The composable supports either passing an existing client instance or
+ * initializing one from a URL and anon key. Once initialized, subsequent
+ * calls without options return the shared client.
+ */
+export declare function useSupabaseClient<Database = Record<string, never>>(options?: UseSupabaseClientOptions<Database>): SupabaseClient<Database>;

package/dist/useSupabaseClient.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSupabaseClient = useSupabaseClient;
+const state_1 = require("./state");
+/**
+ * Returns a shared Supabase client for Vue 3 apps.
+ *
+ * The composable supports either passing an existing client instance or
+ * initializing one from a URL and anon key. Once initialized, subsequent
+ * calls without options return the shared client.
+ */
+function useSupabaseClient(options) {
+    if (options?.client) {
+        (0, state_1.setSupabaseClient)(options.client);
+        return options.client;
+    }
+    const existingClient = (0, state_1.getSupabaseClient)();
+    if (existingClient) {
+        if (options && (options.supabaseUrl || options.supabaseKey)) {
+            throw new Error("[vue-supabase] A Supabase client has already been initialized. Reinitialization is not supported.");
+        }
+        return existingClient;
+    }
+    if (!options) {
+        throw new Error("[vue-supabase] No Supabase client has been initialized. Call useSupabaseClient({ client }) or useSupabaseClient({ supabaseUrl, supabaseKey }) first.");
+    }
+    if (!options.supabaseUrl || !options.supabaseKey) {
+        throw new Error("[vue-supabase] Missing Supabase client configuration. Provide either { client } or { supabaseUrl, supabaseKey }.");
+    }
+    const client = (0, state_1.createSupabaseClientFromConfig)(options.supabaseUrl, options.supabaseKey, options.options);
+    (0, state_1.setSupabaseClient)(client);
+    return client;
+}
+//# sourceMappingURL=useSupabaseClient.js.map

package/dist/useSupabaseClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSupabaseClient.js","sourceRoot":"","sources":["../src/useSupabaseClient.ts"],"names":[],"mappings":";;AAeA,8CAsCC;AApDD,mCAIiB;AAGjB;;;;;;GAMG;AACH,SAAgB,iBAAiB,CAC/B,OAA4C;IAE5C,IAAI,OAAO,EAAE,MAAM,EAAE,CAAC;QACpB,IAAA,yBAAiB,EAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QAClC,OAAO,OAAO,CAAC,MAAM,CAAC;IACxB,CAAC;IAED,MAAM,cAAc,GAAG,IAAA,yBAAiB,GAAE,CAAC;IAC3C,IAAI,cAAc,EAAE,CAAC;QACnB,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;YAC5D,MAAM,IAAI,KAAK,CACb,mGAAmG,CACpG,CAAC;QACJ,CAAC;QACD,OAAO,cAA0C,CAAC;IACpD,CAAC;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CACb,sJAAsJ,CACvJ,CAAC;IACJ,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QACjD,MAAM,IAAI,KAAK,CACb,kHAAkH,CACnH,CAAC;IACJ,CAAC;IAED,MAAM,MAAM,GAAG,IAAA,sCAA8B,EAC3C,OAAO,CAAC,WAAW,EACnB,OAAO,CAAC,WAAW,EACnB,OAAO,CAAC,OAAO,CAChB,CAAC;IAEF,IAAA,yBAAiB,EAAC,MAAM,CAAC,CAAC;IAC1B,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/package.json

@@ -1,20 +1,70 @@
 {
   "name": "@supabase-community/vue-supabase",
-  "version": "1.0.0",
-  "description": "",
+  "version": "3.0.1",
+  "description": "A minimal Vue 3 integration layer for Supabase.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "supabase",
+    "@supabase-community/vue"
+  ],
+  "author": "Supabase Community",
+  "license": "MIT",
   "homepage": "https://github.com/supabase-community/vue-supabase#readme",
-  "bugs": {
-    "url": "https://github.com/supabase-community/vue-supabase/issues"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/supabase-community/vue-supabase.git"
   },
-  "license": "ISC",
-  "author": "",
-  "type": "commonjs",
-  "main": "index.js",
+  "bugs": {
+    "url": "https://github.com/supabase-community/vue-supabase/issues"
+  },
+  "engines": {
+    "node": ">=22"
+  },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "typecheck:playground": "vue-tsc --noEmit -p playground/tsconfig.json",
+    "lint": "eslint . --ext .ts",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "dev": "cd playground && npm run dev"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@supabase/supabase-js": "^2.52.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.2.0",
+    "@typescript-eslint/eslint-plugin": "^8.17.0",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.25.0",
+    "eslint-config-prettier": "^10.0.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "prettier": "^3.5.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.4",
+    "vue-eslint-parser": "^9.0.0",
+    "vue-tsc": "^2.1.8"
   }
 }