Skip to content

Repository files navigation

Vortex

npm versionLicense: 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.

✨ Features

  • 🚀 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

🚀 Quick Start

Installation

npm install @westacks/vortex

Basic Setup

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

Framework Adapters

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 setupconstroot=createRoot(target);root.render(<App/>);});

📚 Documentation

🎯 Core Concepts

Server-Driven Navigation

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

Form Handling

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

Internal State Management

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

🔌 Extensions

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.

🤝 Contributing

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

📄 License

MIT License - see LICENSE for details.

🔗 Links

About

Server-based routing for SPAs

Topics

Resources

Stars

8 stars

Watchers

2 watching

Forks

Used by

Contributors

Languages