# Vue + Vite + Supabase
URL: https://wwadd.dev/stacks/vue-vite-supabase
Last verified: 2026-09-30

A Vue client application with managed authentication and relational data: static frontend delivery, explicit row policies, and server functions for privileged work.

## When to use it
- Most screens are behind a login
- The team prefers Vue and relational data
- Simple user ownership can be enforced with tested row policies

## How the pieces fit
Vue components and composables manage UI; Vite builds the frontend. Supabase provides authentication and Postgres access. Enforce row-level security before exposing tables, and keep privileged service credentials in server functions. Treat route guards as navigation help rather than authorization. Test logout, refresh, and cross-account access; use server rendering separately when public pages need it.

## The tech and its role
- Vue: Components and composables for the client UI
- Vite: Development server and production frontend build
- Supabase: Authentication, Postgres, and row policies

## Real-world examples
- create-vue: The official Vue scaffolder creates Vite-based projects. Frontend starter example; it does not demonstrate Supabase integration. (source: https://github.com/vuejs/create-vue)
- Vue RealWorld: This public RealWorld application illustrates a Vue frontend with API-backed authentication and CRUD. Historical partial example; it does not establish the exact Vue version or backend recommended here. (source: https://github.com/realworld-apps/vue-realworld-example-app)

## Skip if
Skip if public pages require server rendering, or complex organization permissions need a dedicated server authorization layer.

## Testing and shipping
- [Test the behavior users depend on](https://wwadd.dev/moves/testing-shipping/test-user-behavior)
- [Check keyboard access and automated accessibility](https://wwadd.dev/moves/testing-shipping/keyboard-accessibility-check)
- [Investigate flaky browser tests](https://wwadd.dev/moves/testing-shipping/diagnose-flaky-tests)
- [Verify the production build before release](https://wwadd.dev/moves/testing-shipping/verify-built-release)
- [Keep secrets out of browser bundles](https://wwadd.dev/moves/testing-shipping/keep-secrets-server-side)
- [Make CI validate the same release inputs](https://wwadd.dev/moves/testing-shipping/ci-release-gates)
- [Capture errors with useful context](https://wwadd.dev/moves/testing-shipping/error-reporting-context)
- [Prepare rollback before publishing](https://wwadd.dev/moves/testing-shipping/plan-release-rollback)