Use Voltbase with Nuxt

Create a Voltbase project, add sample data, and query it from a Nuxt app.

1. Create a Voltbase project

Sign up or sign in
Create an organization and a project
Open API and copy the Project URL, anon key, and (for server-only writes) the service role key

You can also create projects from the dashboard after signing in — no CLI required for this quickstart.

2. Set up your database

In the dashboard, open Database and create a instruments table (or run SQL):

schema.sql

create table instruments (
  id bigint generated always as identity primary key,
  name text not null
);

insert into instruments (name)
values ('violin'), ('viola'), ('cello');

alter table instruments enable row level security;

create policy "public read"
on instruments for select
to anon
using (true);

Why RLS?

With a public SELECT policy for anon, the browser anon key can read rows. Writes still need auth policies or the service role on the server.

3. Create a Nuxt app

terminal

npx nuxi@latest init voltbase-nuxt
cd voltbase-nuxt
npm install

4. Declare environment variables

Create .env at the project root and paste your dashboard values:

.env

NUXT_PUBLIC_VOLTBASE_URL=https://YOUR_API/api/projects/YOUR_SLUG
NUXT_PUBLIC_VOLTBASE_ANON_KEY=your-anon-key

Public runtime config is available on both server and client. Keep service role keys out of NUXT_PUBLIC_*.

Keep the service role server-only

Never put the service role key in client bundles. Use the anon key in the browser; use the service role only in server routes, Server Components, or backend jobs.

5. Create a Voltbase client

Install the SDK, then add a small helper:

terminal

npm install voltbase-js

composables/useVoltbase.ts

import { createClient } from 'voltbase-js';

export function useVoltbase() {
  const config = useRuntimeConfig();
  return createClient(
    config.public.voltbaseUrl as string,
    config.public.voltbaseAnonKey as string,
  );
}

6. Query Voltbase from Nuxt

Wire public config in nuxt.config.ts, then fetch in a page:

nuxt.config.ts + pages/index.vue

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      voltbaseUrl: process.env.NUXT_PUBLIC_VOLTBASE_URL,
      voltbaseAnonKey: process.env.NUXT_PUBLIC_VOLTBASE_ANON_KEY,
    },
  },
});

// pages/index.vue
<script setup lang="ts">
const voltbase = useVoltbase();
const { data: instruments, error } = await voltbase
  .from('instruments')
  .select('id, name')
  .order('id', 'asc');
</script>

<template>
  <p v-if="error">{{ error.message }}</p>
  <ul v-else>
    <li v-for="row in instruments" :key="row.id">{{ row.name }}</li>
  </ul>
</template>

Next: Auth, Realtime, or the Todo + RLS example.