@route-optimization/vue

Vue 3 composables and components for route optimization and delivery management with Google Maps integration.

Installation

``bash
npm install @route-optimization/vue @route-optimization/core


or

pnpm add @route-optimization/vue @route-optimization/core

or

yarn add @route-optimization/vue @route-optimization/core
`

Features

- ✅ Vue 3 Composition API composables
- ✅ Ready-to-use components with slots for customization
- ✅ TypeScript support with full type definitions
- ✅ Reactive map controls (zoom, center, bounds)
- ✅ Route rendering with automatic bounds fitting
- ✅ Loading and error states built-in
- ✅ Lightweight bundle (~7KB ES, ~5KB CJS)
- ✅ Zero runtime dependencies (except Vue 3 and core)

Quick Start

$3

`vue



`

$3

`vue



`

$3

`vue



`

API Reference

$3

A complete map view component with route rendering.

Props:

| Prop | Type | Default | Description |
| --------------- | --------------- | --------------------------------- | ---------------------------------- |
| apiKey | string | required | Google Maps API key |
| route | Route \| null | null | Route to display on the map |
| center | LatLng | { lat: 13.7563, lng: 100.5018 } | Initial map center |
| zoom | number | 12 | Initial zoom level |
| height | string | '500px' | Map container height |
| width | string | '100%' | Map container width |
| autoFitBounds | boolean | true | Auto-fit bounds when route changes |

Events:

| Event | Payload | Description |
| ---------------- | ----------------- | ------------------------------- |
| map-ready | google.maps.Map | Emitted when map is initialized |
| route-rendered | Route | Emitted when route is rendered |
| error | Error | Emitted when an error occurs |

Slots:

| Slot | Description |
| --------- | -------------------------------------------- |
| loading | Custom loading indicator |
| error | Custom error display (receives error prop) |

Exposed Methods:

- mapInstance: Ref to Google Maps instance
- renderRoute(route): Manually render a route
- clearRoute(): Clear current route
- fitBounds(): Fit map to route bounds

$3

Customizable map zoom controls.

Props:

| Prop | Type | Default | Description |
| ----------------- | ------------------------------ | -------- | ----------------------- |
| mapInstance | Ref | required | Map instance reference |
| initialZoom | number | 12 | Initial zoom level |
| minZoom | number | 1 | Minimum zoom level |
| maxZoom | number | 20 | Maximum zoom level |
| showZoomLevel | boolean | false | Show current zoom level |
| showResetButton | boolean | false | Show reset zoom button |

Events:

| Event | Payload | Description |
| ------------- | -------- | ----------------------------- |
| zoom-change | number | Emitted when zoom changes |
| zoom-in | - | Emitted when zoom in clicked |
| zoom-out | - | Emitted when zoom out clicked |
| reset | - | Emitted when reset clicked |

Slots:

| Slot | Description |
| ----------------- | ------------------------------ |
| before-controls | Content before zoom controls |
| after-controls | Content after zoom controls |
| zoom-in-icon | Custom zoom in button content |
| zoom-out-icon | Custom zoom out button content |
| reset-icon | Custom reset button content |

$3

Composable for managing map instance and route rendering.

`typescript
function useRouteMap(options: UseRouteMapOptions): UseRouteMapReturn;

interface UseRouteMapOptions {
apiKey: string;
mapContainer: Ref;
center?: LatLng;
zoom?: number;
onMapReady?: (map: google.maps.Map) => void;
onError?: (error: Error) => void;
}

interface UseRouteMapReturn {
mapInstance: Ref;
isLoading: Ref;
error: Ref;
renderRoute: (route: Route) => Promise;
clearRoute: () => void;
fitBounds: () => void;
}
`

$3

Composable for managing map zoom controls.

`typescript
function useMapControls(
mapInstance: Ref,
options?: UseMapControlsOptions
): UseMapControlsReturn;

interface UseMapControlsOptions {
initialZoom?: number;
minZoom?: number;
maxZoom?: number;
onZoomChange?: (zoom: number) => void;
}

interface UseMapControlsReturn {
zoom: Ref;
canZoomIn: Ref;
canZoomOut: Ref;
zoomIn: () => void;
zoomOut: () => void;
setZoom: (level: number) => void;
resetZoom: () => void;
}
`

Advanced Usage

$3

`vue



`

$3

`vue



`

$3

`vue



`

Type Definitions

This package re-exports all types from @route-optimization/core:

`typescript
import type { Route, Stop, Vehicle, LatLng, RouteMetrics, StopType } from '@route-optimization/vue';
``

Bundle Size

- ES Module: ~7.0 KB (2.3 KB gzipped)
- CommonJS: ~5.1 KB (1.9 KB gzipped)
- Includes CSS: ~1.6 KB (0.6 KB gzipped)

Browser Support

- Modern browsers with ES2020 support
- Vue 3.3.0 or higher required
- Google Maps JavaScript API v3

Related Packages

- @route-optimization/core - Core types and utilities
- @route-optimization/react - React hooks and components
- @route-optimization/converter - DirectionsResult format conversion

License

MIT

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting PRs.