basefyio + Nuxt: Database Backend for Nuxt Apps
Nuxt handles rendering and routing on top of Vue; basefyio provides the backend — database, auth, and storage — through the basefyio-js SDK on both server and client.
Install
npm install basefyio-jsCreate the client
// utils/basefyio.ts
import { createClient } from "basefyio-js";
const config = useRuntimeConfig();
export const bf =createClient({
projectId: config.public.basefyioProjectId,
apiKey: config.public.basefyioAnonKey,
});Expose the anon key via runtimeConfig.public for client use. For server routes that need elevated access, read a service key from the private runtimeConfig instead.
Fetch data in a component
<script setup lang="ts">
import { bf } from "~/utils/basefyio";
const { data: posts } = await useAsyncData("posts", async () => {
const { data } = await bf.from("posts").select("id, title");
return data ?? [];
});
</script>Server and client
Use the SDK in composables, server routes (/server/api), and plugins with one setup.
No backend boilerplate
Query the database directly instead of writing server routes for basic CRUD.
Auth and storage included
bf.auth and bf.storage cover sign-in and uploads out of the box.
Frequently asked questions
- Does basefyio work with Nuxt 3 server routes?
- Yes. Create a server-side client with a service key in /server/api routes for trusted operations, and a public client for the browser.
- Where do basefyio keys go in Nuxt?
- Public anon keys go in runtimeConfig.public; service keys go in the private runtimeConfig, accessed only in server routes.
Other integrations
Build your Nuxt backend on basefyio
database, auth, storage, and a REST API — running in minutes.