spora-ai/spora-frontend

Spora admin UI — prebuilt assets delivered as a Composer package. Consumed by spora-ai/spora-skeleton via spora-ai/installer.

v0.6.0 2026-07-15 10:52 UTC

Requires

• php: ^8.4.1
• composer/installers: ^2.0

MIT

Published on Packagist.org on 2026-07-15 11:34 UTC

README

The prebuilt Vue 3 admin UI for Spora, shipped as a Composer package of type spora-frontend.

What this is

A decoupled, standalone Vue + Vite + Tailwind + radix-vue SPA that lives in its own repository and gets distributed as a prebuilt artifact to operator installs (see spora-ai/spora). Operators do not need Node — composer install spora-ai/spora-frontend drops the compiled build output into public/spora/ via spora-ai/installer ^1.4. The SPA is then served from /spora/* by the operator's PHP front controller.

This repository is the source of truth for the UI. The Composer's dist.url points at GitHub Release assets produced by the build-and-release workflow (see .github/workflows/ci.yml).

Layout

frontend/
├── src/                # Vue 3 SPA source
│   ├── apps/           # Feature apps (plugins, memories, settings, …)
│   ├── components/     # Shared components
│   ├── composables/    # Vue composables
│   ├── stores/         # Pinia stores
│   └── …
├── public/             # Static assets bundled into the build
├── tests/              # Vitest specs
├── vite.config.ts      # base: '/spora/', outDir: 'spora' (consumed by spora-ai/installer)
└── package.json

Local development

The operator install at spora-ai/spora uses a two-terminal dev workflow:

git clone https://github.com/spora-ai/spora-frontend
git clone https://github.com/spora-ai/spora      ../spora
cd ../spora
composer require spora-ai/spora-frontend --path=../spora-frontend
composer install
composer dev          # Terminal 1: PHP on http://localhost:8080

In a second terminal, start Vite from the path-installed frontend:

cd ../spora/vendor/spora-ai/spora-frontend
npm install            # first time only
npm run dev            # Terminal 2: Vite on http://localhost:5173

Vite's server.proxy['/api'] forwards /api/* to the PHP server. Visit http://localhost:5173 for HMR; the API lives at http://localhost:8080/api/*.

Edit a .vue file here → Vite HMR triggers → UI updates without a reload.

Production build

Tagging v* (e.g. v0.1.0) on main triggers the build-and-release workflow which:

1. Runs npm ci && npm run build.
2. Packages spora/ (the Vite build output, with base: '/spora/' rewriting asset URLs) into spora-frontend-{tag}.tar.gz (with a top-level spora-frontend-{tag}/ directory).
3. Creates a GitHub Release with the tarball attached.

spora-ai/installer consumes that tarball as dist.url and routes its contents into the operator's public/spora/. The SPA is then served from /spora/* by the operator's PHP front controller.

Build locally without releasing

npm install
npm run build          # outputs spora/
npm run lint
npm test               # Vitest, 1471 specs
npm run test:coverage  # Vitest with v8 coverage

How it integrates with Spora

Layer	Repo	Purpose
Framework	spora-ai/spora-core	PHP framework, plugin system, agents, recipes, drivers
Operator install	spora-ai/spora	What operators composer create-project. Pulls core + this repo + installer
Prebuilt UI	this repo	Vue SPA source → prebuilt spora/ (base /spora/) → Composer spora-frontend package
Composer routing	spora-ai/installer	Routes spora-frontend packages → public/spora/
Plugin template	spora-ai/spora-plugin-skeleton	Use-this-template for plugin authors

License

MIT