**SQL-first reactive queries for Vue 3**
npm install @compilers/s2clientSQL-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
{{ user.name }}
`
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
`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())
`
`typescriptselect * from users
// ✅ One line. Loading/error states built-in. Fully reactive.
const users = s2client.query().execute()`
`bash`
npm install @compilers/s2client
`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
})
]
})
`
`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.
`vue
Loading...
{{ orders.error }}
{{ order.total }}
`
`vue
`
`vue`
`vue`
`vue
{{ product.name }}
`
Every query returns a reactive object with:
- loading - Boolean, true during executionerror
- - Error message if query failsexecuted
- - Boolean, true after first executionlast_update
- - Timestamp of last successful executionexecute()
- - Method to manually run/re-run the queryreset()
- - Method to clear results and reset state
`vue
Last updated: {{ users.last_update }}
Loading...
Error: {{ users.error }}
{{ user.name }}
`
s2client doesn't bypass security—it centralizes it.
Security is applied once, in one place, instead of scattered across dozens of endpoints.
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
``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
- Node.js >= 18
- Vue 3.x
- Vite (build tool)
- Any SQL database (PostgreSQL, MySQL, SQLite, etc.)
MIT
- Full Documentation
- Live Examples (COMING SOON)
- Why s2client?
- Technical Summary
---
Build a lot with little code.