vue-map-ui

vue-map-ui

Vue 3 map component library based on leaflet.

Documentation & Demo

Installation

# NPM
$ npm install vue-map-ui leaflet

# Yarn
$ yarn add vue-map-ui leaflet

# pnpm
$ pnpm install vue-map-ui leaflet

Usage

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
// import styles
import 'leaflet/dist/leaflet.css';
import 'vue-map-ui/dist/normalize.css';
import 'vue-map-ui/dist/style.css';
import 'vue-map-ui/dist/theme-all.css';

createApp(App).mount('#app');

<script setup>
// Map.vue
import { VMap, VMapOsmTileLayer, VMapZoomControl } from 'vue-map-ui';
</script>

<template>
  <VMap style="height: 200px;">
    <VMapOsmTileLayer />
    <VMapZoomControl />
  </VMap>
</template>

Auto import

$ npm install -D unplugin-vue-map-ui unplugin-vue-components

// vite.config.ts
import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';
import { VueMapUiResolver, VueMapUiPreset } from 'unplugin-vue-map-ui';

export default defineConfig({
  // ...
  plugins: [
    // ...
    Components({
      resolvers: [VueMapUiResolver()],
      types: [VueMapUiPreset]
    })
  ]
});

// webpack.config.js
const Components = require('unplugin-vue-components/webpack');
const { VueMapUiResolver, VueMapUiPreset } = require('unplugin-vue-map-ui');

module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [VueMapUiResolver()],
      types: [VueMapUiPreset]
    })
  ]
};

If you use typescript, make sure you also add components.d.ts to your tsconfig.json under include.

Volar support

If you use volar, please add the global component type definition to compilerOptions.types in tsconfig.json.

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["vue-map-ui/global"]
  }
}

Typescript

If you use typescript, please add the type definitions for leaflet library.

$ npm install -D @types/leaflet

Nuxt

For Nuxt users, you only need to install nuxt-vue-map-ui.

$ npm install -D nuxt-vue-map-ui

Then add the code below into your config file.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-vue-map-ui'],
  vueMap: {
    /** Options */
  }
});

Refer to the docs for how to configure it.

License

Licensed under the MIT License.