basefyio + Vue: Database Backend for Vue Apps

Install

npm install basefyio-js

Create the client

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

export const bf =createClient({
  projectId: import.meta.env.VITE_BASEFYIO_PROJECT_ID,
  apiKey: import.meta.env.VITE_BASEFYIO_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 { bf } from "../basefyio";

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

Frequently asked questions

Does basefyio work with Nuxt?

Yes. Nuxt is built on Vue, and basefyio-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 bf.auth.getUser and bf.auth.onAuthStateChange and provide it app-wide.

Other integrations