Browser-Based Vue 3 No Login Free

Route Hub

A free multi-stop trip planner that runs entirely in the browser. Search for stops, drag to reorder, sort by proximity, and send the full route to Google Maps for navigation. No install, no account.

Visit RouteHub

The Problem

Most mapping apps treat multi-stop trip planning as an afterthought. Google Maps lets you add waypoints, but reordering them on mobile is clunky past three stops. Purpose-built tools either require a subscription, push you toward an app download, or bury the feature behind several menus.

Route Hub does one thing well: helps you build and reorder a stop list, then hands it off to Google Maps for turn-by-turn navigation. This is the fourth iteration of a personal tool I've been refining for road trips and day-trip itineraries.

  • ▸Works immediately in a mobile browser without installing anything
  • ▸Build a stop list quickly and reorder stops by dragging
  • ▸Does one thing well instead of ten things awkwardly
  • ▸Free with no login wall

Drag to Reorder

Rearrange stops in any order by dragging. Works on mobile and desktop. The map updates in real time as you reorder.

Proximity Sort

Auto-reorder stops using a nearest-neighbor sort to minimize backtracking. Not mathematically optimal, but good enough for most day trips.

Save and Share

Name and save routes to your device using localStorage. Share any route via a self-contained URL that encodes your stops directly — no server stores the data.

Google Maps Handoff

One tap sends your full stop list to Google Maps as waypoints. Route Hub handles the planning; Google Maps handles the navigation.

How It Works

Route Hub is a single-page application built with Vue 3 (Composition API). The map renders via the Google Maps JavaScript API. Location search uses Google Places Autocomplete, routed through a thin Vercel serverless proxy so the API key is never exposed to the browser.

Routes are stored in localStorage on your device. Nothing is uploaded to a database. The shareable link encodes your stop data directly into the URL as compressed text — the server never sees it.

When you tap "Open in Google Maps," the app builds a directions URL with all your stops as waypoints and opens it in a new tab.

Tech Stack

Layer Technology
Frontend framework Vue 3 (Composition API)
Build tool Vite
Styling Tailwind CSS
Maps Google Maps JavaScript API (@googlemaps/js-api-loader)
Place search Google Places Autocomplete API
Drag and drop vuedraggable
API proxy Vercel Serverless Functions (Node.js)
Hosting Vercel
Route persistence Browser localStorage

Privacy

  • ▸No account, no analytics, no cookies beyond what the Google Maps embed sets.
  • ▸Saved routes live in your browser's localStorage and are never uploaded.
  • ▸Shared links encode stop data in the URL — no route data is stored on any server.
  • ▸Search queries pass through the proxy server momentarily but are not logged or stored.

Limitations

  • ▸Proximity sort uses a greedy nearest-neighbor algorithm. It reduces backtracking but is not mathematically optimal.
  • ▸No drive times or ETAs. Use Google Maps for that after handing off.
  • ▸Saved routes are tied to your browser. Clearing browser data removes them.
  • ▸Share links for long routes (10+ stops) can be unwieldy in some messaging apps.