npm version License: MIT

Server-based routing for SPAs with framework-agnostic design

Vortex is a powerful, lightweight library that provides server-driven routing for single-page applications. Built with a philosophy that you should own all your code, it offers a flexible core with official adapters for React, Vue, Svelte, and SolidJS.

• 🚀 Framework Agnostic - Works with any frontend framework
• 📡 Server-Driven Routing - Navigate without client-side routing
• 🔄 Inertia.js Compatible - Works seamlessly with Inertia.js servers
• ⚡ Performance Optimized - Built-in prefetching, polling, and caching
• 🎯 SSR Ready - Server-side rendering support out of the box
• 🔧 Extensible - Plugin system for custom functionality
• 📦 All-in-One - Adapters and extensions included in core package

npm install @westacks/vortex

import { createVortex } from '@westacks/vortex';
import inertia from '@westacks/vortex/inertia';
createVortex(async (target, page, install, ssr) => {
 // Install Inertia.js compatibility layer
 install(inertia(page.get()));
 
 // Your app setup here
 const app = document.createElement('div');
 app.textContent = 'Hello Vortex!';
 target.appendChild(app);
});

Vortex includes all framework adapters in the core package:

import { createVortex } from '@westacks/vortex';
import { createRoot } from 'react-dom/client';
createVortex(async (target, page, install, ssr) => {
 // React setup
 const root = createRoot(target);
 root.render(<App />);
});

• Getting Started - Quick setup guide
• Installation Guides - Framework-specific setup
• API Reference - Complete API documentation
• Examples - Real-world usage examples

import { axios } from '@westacks/vortex';
// Navigate to a new page
axios.get('/dashboard');
// Submit a form
axios.post('/users', { name: 'John', email: 'john@example.com' });
// Update data
axios.patch('/users/1', { name: 'Jane' });

import { useForm } from '@westacks/vortex';
const form = useForm({
 name: '',
 email: ''
});
// Form is automatically reactive
form.name = 'John';
form.email = 'john@example.com';
// Submit with automatic error handling
form.post('/users');

Vortex uses signals internally to manage page state and reactivity. You don't need to create signals yourself - Vortex handles this automatically.

Vortex comes with two official built-in extensions:

• Inertia.js Compatibility - Works seamlessly with Inertia.js servers
• BProgress - Progress bar integration

Note: While Vortex works seamlessly with Inertia.js servers, the frontend API differs from the standard Inertia.js client.

We welcome contributions! Please see our Contributing Guide for details.

MIT License - see LICENSE for details.

• Documentation
• GitHub Repository
• Issues
• Discussions