VueLibrary

A powerful Vue.js library collection for building interactive map applications and modern UI components

🚀 Introduction

VueLibrary is a monorepo containing Vue.js libraries designed to build interactive map applications and modern user interface components. The project is built with Nx and TypeScript, providing complete solutions for:

• Interactive maps with MapLibre GL
• Drag and drop interactions with components
• Data management and visualization
• Shared utilities for Vue.js

📦 Main Libraries

🗺️ Map Libraries

• @hungpvq/vue-map-core - Core map functionality and components
• @hungpvq/vue-map-basemap - Base map controls and switching
• @hungpvq/vue-map-draw - Drawing and editing tools
• @hungpvq/vue-map-measurement - Distance and area measurement tools
• @hungpvq/vue-map-print - Map printing functionality
• @hungpvq/vue-map-dataset - Dataset management and visualization
• @hungpvq/vue-map-legend - Legend components

🎯 UI Libraries

• @hungpvq/vue-draggable - Draggable components
• @hungpvq/content-menu - Context menu
• @hungpvq/router - Router utilities

🔧 Shared Libraries

• @hungpvq/shared - Shared utilities
• @hungpvq/shared-core - Core shared functions
• @hungpvq/shared-file - File utilities
• @hungpvq/shared-store - Store utilities
• @hungpvq/shared-log - Logging utilities

🛠️ Installation

Install the entire project

# Clone repository
git clone https://github.com/hung4564/vue-library.git
cd vue-library

# Install dependencies
npm install

# Build all libraries
npm run build

Install individual libraries

# Map libraries
npm install @hungpvq/vue-map-core
npm install @hungpvq/vue-map-basemap
npm install @hungpvq/vue-map-draw
npm install @hungpvq/vue-map-measurement
npm install @hungpvq/vue-map-print
npm install @hungpvq/vue-map-dataset
npm install @hungpvq/vue-map-legend

# UI libraries
npm install @hungpvq/vue-draggable
npm install @hungpvq/content-menu

# Shared libraries
npm install @hungpvq/shared
npm install @hungpvq/shared-core
npm install @hungpvq/shared-file
npm install @hungpvq/shared-store

🚀 Quick Start

Basic Map Component

<template>
  <Map @map-loaded="onMapLoaded">
    <BaseMapControl position="bottom-left" />
    <DrawControl position="top-right" />
    <MeasurementControl position="top-right" />
    <PrintControl />
  </Map>
</template>

<script setup>
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl } from '@hungpvq/vue-map-basemap';
import { DrawControl } from '@hungpvq/vue-map-draw';
import { MeasurementControl } from '@hungpvq/vue-map-measurement';
import { PrintControl } from '@hungpvq/vue-map-print';
import '@hungpvq/vue-map-core/style.css';
</script>

Advanced Map with Dataset Management

<template>
  <Map @map-loaded="onMapLoaded">
    <DatasetControl position="top-left" show />
    <LayerControl position="top-left" show />
    <BaseMapControl position="bottom-left" />
    <DrawControl position="top-right" />
    <MeasurementControl position="top-right" />
    <PrintAdvancedControl />
  </Map>
</template>

<script setup>
import { Map } from '@hungpvq/vue-map-core';
import { BaseMapControl } from '@hungpvq/vue-map-basemap';
import { DrawControl } from '@hungpvq/vue-map-draw';
import { MeasurementControl } from '@hungpvq/vue-map-measurement';
import { PrintAdvancedControl } from '@hungpvq/vue-map-print';
import { DatasetControl, LayerControl } from '@hungpvq/vue-map-dataset';
import '@hungpvq/vue-map-core/style.css';
</script>

📚 Documentation

• Documentation - Detailed documentation
• Demos - Demo applications
• API Reference - API reference

🏗️ Development

Available Scripts

# Development
npm run docs:dev          # Run docs development server
npm run map:build         # Build map libraries
npm run share:build       # Build shared libraries

# Testing
npm run lint              # Lint code
npm run ts-check          # TypeScript check

# Release
npm run map:release       # Release map libraries
npm run share:release     # Release shared libraries

Project Structure

vue-library/
├── apps/                 # Demo applications
├── libs/                 # Libraries
│   ├── map/             # Map-related libraries
│   ├── share/           # Shared utilities
│   └── ui/              # UI components
├── docs/                # Documentation
└── deploy/              # Built documentation

🤝 Contributing

All contributions are welcome! Please read the Contributing Guide for more details.

📄 License

MIT License - see LICENSE for more details.

👨‍💻 Author

hung.pv - GitHub

---

📞 Contact

• Issues: GitHub Issues
• Repository: GitHub Repository