s2client

SQL-first reactive queries for Vue 3

Write SQL directly in your Vue components. No REST endpoints, no GraphQL schemas, no ORMs. Just SQL—encrypted at build time, executed server-side, fully reactive.

``vue



`

Why s2client?

Traditional frontend development buries SQL behind layers of abstraction. You build REST endpoints, validate payloads, manage state manually, and write mountains of boilerplate. Backend teams create endpoints. Frontend teams wait. Everyone writes more code than necessary.

s2client eliminates the ceremony.

- ✅ Write SQL directly in Vue - No backend bottlenecks
- ✅ One line replaces dozens - No fetch calls, no manual state management
- ✅ Forms → Query parameters - Reactive objects bind directly to SQL
- ✅ Single backend endpoint - No endpoint sprawl, centralized security
- ✅ Build-time encryption - SQL encrypted with AES-256, never exposed in client
- ✅ Fully reactive - Query results are Vue refs, updates automatic
- ✅ Database agnostic - Works with PostgreSQL, MySQL, SQLite, SQL Server

The Problem

$3

`typescript
// ❌ Manual state management, loading, errors, fetch logic
const users = ref([])
const loading = ref(false)
const error = ref(null)

async function fetchUsers() {
loading.value = true
error.value = null

try {
const response = await fetch('/api/users')
if (!response.ok) throw new Error(HTTP error! status: ${response.status})
const data = await response.json()
users.value = data
} catch (e) {
error.value = e.message
} finally {
loading.value = false
}
}

onMounted(() => fetchUsers())
`

$3

`typescript
// ✅ One line. Loading/error states built-in. Fully reactive.
const users = s2client.query(select * from users).execute()
`

Installation

`bash
npm install @compilers/s2client
`

Setup

$3

`typescript
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { dbbuilderTransform } from '@compilers/s2client/plugin'

export default defineConfig({
plugins: [
vue(),
dbbuilderTransform({
endpoint: '/api/query',
debounceMs: 300,
debug: false
})
]
})
`

$3

`typescript
// Example Express.js endpoint
app.post('/api/query', authenticate, async (req, res) => {
const { payload, params } = req.body

try {
// Decode the SQL (comes encrypted from frontend)
const sql = decodePayload(payload)

// Validate auth/permissions here
// Apply rate limiting if needed

// Execute query with parameterized values
const rows = await db.query(sql, params)

res.json({ rows })
} catch (error) {
res.status(400).json({ error: error.message })
}
})
`

That's it. One endpoint handles all queries.

Examples

$3

`vue



`

$3

`vue



`

$3

`vue

`

$3

`vue

`

$3

`vue



`

Built-in Properties

Every query returns a reactive object with:

- loading - Boolean, true during execution
- error - Error message if query fails
- executed - Boolean, true after first execution
- last_update - Timestamp of last successful execution
- execute() - Method to manually run/re-run the query
- reset() - Method to clear results and reset state

`vue



`

Security

s2client doesn't bypass security—it centralizes it.

$3

- ✅ SQL encrypted with AES-256 at build time
- ✅ Compiler enforces parameterized queries only
- ✅ No executable SQL exists in client runtime
- ✅ Query structure hidden from client inspection

$3

You still control access server-side:
- ✅ Validate authentication/authorization
- ✅ Sanitize and validate query parameters
- ✅ Apply rate limiting and logging
- ✅ Use prepared statements (parameters always separate from SQL)
- ✅ Implement row-level security in your database

Security is applied once, in one place, instead of scattered across dozens of endpoints.

Guiding Principles

$3

SQL is the language of data. It's established, powerful, and universal. QueryBuilders, ORMs, REST APIs, GraphQL—they all add unnecessary complexity. s2client lets you use SQL directly, as intended.

$3

Every abstraction layer adds boilerplate. s2client eliminates mountains of frontend ceremony and backend endpoint sprawl. One line replaces dozens. Less code means fewer bugs, faster development, and easier maintenance.

$3

SQL in the client is powerful but must be secured. s2client encrypts SQL at build time with AES-256, ensuring your queries remain private. The compiler enforces parameterized queries only. You still validate parameters server-side, but security is centralized in one place.

$3

Method signatures are clean: 2-3 arguments max. s2client.query(sql, params) is all you need to know. No complex builders, no configuration hell, no mental overhead. The API is self-documenting.

$3

Query results are Vue refs that work seamlessly with watch(), watchEffect(), and templates. Change a parameter, the query re-runs automatically. No manual subscriptions, no callback hell. Reactivity just works.

$3

s2client doesn't care what database you use. PostgreSQL, MySQL, SQLite, SQL Server—write standard SQL and your backend handles execution. Switch databases without changing frontend code.

Comparison

$3

`typescript
// ❌ Traditional Backend: 5 endpoints per resource
app.get('/api/users', async (req, res) => { / ... / })
app.get('/api/users/:id', async (req, res) => { / ... / })
app.post('/api/users', async (req, res) => { / ... / })
app.put('/api/users/:id', async (req, res) => { / ... / })
app.delete('/api/users/:id', async (req, res) => { / ... / })

// Orders - 5 more endpoints
// Products - 5 more endpoints
// That's 15 endpoints for 3 resources!
`

$3

`typescript
// ✅ s2client Backend: ONE endpoint for ALL queries
app.post('/api/query', authenticate, async (req, res) => {
const { payload, params } = req.body

const sql = decodePayload(payload)
const result = await db.query(sql, params)

res.json({ rows: result })
})

// That's it! Handles:
// - All user queries
// - All order queries
// - All product queries
// - ANY SQL operation

// Apply auth, rate limiting, logging in ONE place
``

Frontend = Fullstack

With s2client, frontend developers become fullstack:

- 🚀 Write SQL directly in Vue components
- 🚀 No waiting for backend teams to create endpoints
- 🚀 No context switching between frontend/backend
- 🚀 Ship features faster with less code

Requirements

- Node.js >= 18
- Vue 3.x
- Vite (build tool)
- Any SQL database (PostgreSQL, MySQL, SQLite, etc.)

License

MIT

Learn More

- Full Documentation
- Live Examples (COMING SOON)
- Why s2client?
- Technical Summary

---

Build a lot with little code.