Kolaybase + Vue: PostgreSQL Backend for Vue Apps

Install

npm install kolaybase-js

Create the client

// src/kolaybase.ts
import { createClient } from "kolaybase-js";

export const kb = createClient({
  projectId: import.meta.env.VITE_KOLAYBASE_PROJECT_ID,
  apiKey: import.meta.env.VITE_KOLAYBASE_ANON_KEY,
});

Use the anon key in the browser; row-level security enforces access at the database.

A data composable

// composables/usePosts.ts
import { ref, onMounted } from "vue";
import { kb } from "../kolaybase";

export function usePosts() {
  const posts = ref([]);
  onMounted(async () => {
    const { data } = await kb.from("posts").select("id, title");
    posts.value = data ?? [];
  });
  return { posts };
}

Frequently asked questions

Does Kolaybase work with Nuxt?

Yes. Nuxt is built on Vue, and kolaybase-js runs in both server and client contexts. Use the anon key on the client and a service key only in server routes.

How do I track the logged-in user in Vue?

Create a composable around kb.auth.getUser and kb.auth.onAuthStateChange and provide it app-wide.

Other integrations