Use Voltbase with Vue

Create a Voltbase project, add sample data, and query it from a Vite Vue 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 Vue app

terminal

npm create vite@latest voltbase-vue -- --template vue-ts
cd voltbase-vue
npm install

4. Declare environment variables

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

.env

VITE_VOLTBASE_URL=https://YOUR_API/api/projects/YOUR_SLUG
VITE_VOLTBASE_ANON_KEY=your-anon-key

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

src/lib/voltbase.ts

import { createClient } from 'voltbase-js';

export const voltbase = createClient(
  import.meta.env.VITE_VOLTBASE_URL,
  import.meta.env.VITE_VOLTBASE_ANON_KEY,
);

6. Query Voltbase from Vue

Fetch rows from instruments and render them:

src/App.vue

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { voltbase } from './lib/voltbase';

type Instrument = { id: number; name: string };

const rows = ref<Instrument[]>([]);
const error = ref<string | null>(null);

onMounted(async () => {
  const { data, error: err } = await voltbase
    .from('instruments')
    .select('id, name')
    .order('id', 'asc');
  if (err) error.value = err.message;
  else rows.value = (data as Instrument[]) ?? [];
});
</script>

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

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