Vue 3 composables and components for route optimization and delivery management
npm install @route-optimization/vueVue 3 composables and components for route optimization and delivery management with Google Maps integration.
``bash`
npm install @route-optimization/vue @route-optimization/coreor
pnpm add @route-optimization/vue @route-optimization/coreor
yarn add @route-optimization/vue @route-optimization/core
- ✅ 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)
`vue
:route="deliveryRoute"
height="500px"
:auto-fit-bounds="true"
@map-ready="onMapReady"
@route-rendered="onRouteRendered"
@error="onError"
/>
`
` vue
Loading map...
Error: {{ error.message }}
`
` vue
:map-instance="mapViewRef.mapInstance"
:show-zoom-level="true"
:show-reset-button="true"
@zoom-change="onZoomChange"
>
`
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 instancerenderRoute(route)
- : Manually render a routeclearRoute()
- : Clear current routefitBounds()
- : Fit map to route bounds
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 |
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;
}
`
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;
}
`
` Initializing map...vue`
` {{ error.message }}vue`
Map Error
`vue
`
This package re-exports all types from @route-optimization/core:
`typescript``
import type { Route, Stop, Vehicle, LatLng, RouteMetrics, StopType } from '@route-optimization/vue';
- 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)
- Modern browsers with ES2020 support
- Vue 3.3.0 or higher required
- Google Maps JavaScript API v3
- @route-optimization/core - Core types and utilities
- @route-optimization/react - React hooks and components
- @route-optimization/converter - DirectionsResult format conversion
MIT
Contributions are welcome! Please read our contributing guidelines before submitting PRs.