nuxt-maplibre-gl 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +93 -0
  2. package/dist/module.d.mts +12 -0
  3. package/dist/module.json +17 -0
  4. package/dist/module.mjs +72 -0
  5. package/dist/runtime/plugins/maplibre-gl.client.d.ts +6 -0
  6. package/dist/runtime/plugins/maplibre-gl.client.js +30 -0
  7. package/dist/types.d.mts +3 -0
  8. package/package.json +65 -0
package/README.md ADDED
@@ -0,0 +1,93 @@
1
+ # nuxt-maplibre-gl
2
+
3
+ [![npm](https://img.shields.io/npm/v/nuxt-maplibre-gl)](https://www.npmjs.com/package/nuxt-maplibre-gl)
4
+
5
+ [Nuxt](https://nuxt.com) module for [vue3-maplibre-gl](https://github.com/danh121097/vue-maplibre-gl) — interactive maps with MapLibre GL JS.
6
+
7
+ ## Features
8
+
9
+ - Auto-import 10+ map components (Maplibre, GeoJsonSource, FillLayer, etc.)
10
+ - Auto-import 15+ composables (useFlyTo, useMapEventListener, etc.)
11
+ - Auto-import CSS — no manual style import needed
12
+ - SSR-safe — components register client-only, composables have browser guards
13
+ - Zero configuration required
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ bun add nuxt-maplibre-gl
19
+ ```
20
+
21
+ ## Setup
22
+
23
+ Add to `nuxt.config.ts`:
24
+
25
+ ```typescript
26
+ export default defineNuxtConfig({
27
+ modules: ['nuxt-maplibre-gl'],
28
+
29
+ // Optional configuration
30
+ maplibre: {
31
+ css: true, // auto-import CSS (default: true)
32
+ prefix: '', // composable prefix (default: none)
33
+ },
34
+ });
35
+ ```
36
+
37
+ ## Usage
38
+
39
+ Components and composables are auto-imported. Wrap map in `<ClientOnly>`:
40
+
41
+ ```vue
42
+ <template>
43
+ <ClientOnly>
44
+ <Maplibre :options="mapOptions" style="height: 500px">
45
+ <GeoJsonSource :data="geoData">
46
+ <FillLayer :style="fillStyle" />
47
+ <CircleLayer :style="circleStyle" />
48
+ </GeoJsonSource>
49
+ <Marker :lnglat="[0, 0]" :draggable="true" />
50
+ </Maplibre>
51
+ </ClientOnly>
52
+ </template>
53
+
54
+ <script setup>
55
+ const mapOptions = ref({
56
+ style: 'https://demotiles.maplibre.org/style.json',
57
+ center: [0, 0],
58
+ zoom: 2,
59
+ });
60
+
61
+ const geoData = ref({
62
+ type: 'FeatureCollection',
63
+ features: [],
64
+ });
65
+
66
+ const fillStyle = ref({ 'fill-color': '#088', 'fill-opacity': 0.8 });
67
+ const circleStyle = ref({ 'circle-radius': 6, 'circle-color': '#007cbf' });
68
+ </script>
69
+ ```
70
+
71
+ ## Auto-imported Components
72
+
73
+ | Component | Description |
74
+ |---|---|
75
+ | `Maplibre` | Main map container |
76
+ | `GeoJsonSource` | GeoJSON data source |
77
+ | `FillLayer` | Fill polygons |
78
+ | `CircleLayer` | Circle points |
79
+ | `LineLayer` | Line features |
80
+ | `SymbolLayer` | Icons and text |
81
+ | `Marker` | HTML markers |
82
+ | `PopUp` | Popup windows |
83
+ | `Image` | Map images |
84
+ | `GeolocateControls` | Geolocation |
85
+
86
+ ## Auto-imported Composables
87
+
88
+ All 15+ composables from vue3-maplibre-gl are auto-imported:
89
+ `useCreateMaplibre`, `useFlyTo`, `useEaseTo`, `useJumpTo`, `useMapEventListener`, etc.
90
+
91
+ ## License
92
+
93
+ MIT
package/dist/module.d.mts ADDED
@@ -0,0 +1,12 @@
1
+ import * as _nuxt_schema from '@nuxt/schema';
2
+
3
+ interface ModuleOptions {
4
+ /** Auto-import vue3-maplibre-gl CSS (default: true) */
5
+ css?: boolean;
6
+ /** Prefix for auto-imported composables (default: none) */
7
+ prefix?: string;
8
+ }
9
+ declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
10
+
11
+ export { _default as default };
12
+ export type { ModuleOptions };
package/dist/module.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "name": "nuxt-maplibre-gl",
3
+ "configKey": "maplibre",
4
+ "description": "Nuxt module for vue3-maplibre-gl with auto-import, SSR support, and full TypeScript",
5
+ "links": {
6
+ "documentation": "https://github.com/danh121097/vue-maplibre-gl",
7
+ "repository": "https://github.com/danh121097/vue-maplibre-gl"
8
+ },
9
+ "compatibility": {
10
+ "nuxt": ">=3.0.0"
11
+ },
12
+ "version": "1.0.1",
13
+ "builder": {
14
+ "@nuxt/module-builder": "1.0.2",
15
+ "unbuild": "3.6.1"
16
+ }
17
+ }
package/dist/module.mjs ADDED
@@ -0,0 +1,72 @@
1
+ import { defineNuxtModule, createResolver, addPlugin, addImports } from '@nuxt/kit';
2
+
3
+ const module$1 = defineNuxtModule({
4
+ meta: {
5
+ name: "nuxt-maplibre-gl",
6
+ configKey: "maplibre",
7
+ description: "Nuxt module for vue3-maplibre-gl with auto-import, SSR support, and full TypeScript",
8
+ links: {
9
+ documentation: "https://github.com/danh121097/vue-maplibre-gl",
10
+ repository: "https://github.com/danh121097/vue-maplibre-gl"
11
+ },
12
+ compatibility: {
13
+ nuxt: ">=3.0.0"
14
+ }
15
+ },
16
+ defaults: {
17
+ css: true,
18
+ prefix: ""
19
+ },
20
+ setup(options, nuxt) {
21
+ const { resolve } = createResolver(import.meta.url);
22
+ if (options.css) {
23
+ nuxt.options.css.push("vue3-maplibre-gl/dist/style.css");
24
+ }
25
+ nuxt.options.build.transpile.push("vue3-maplibre-gl");
26
+ nuxt.options.vite.optimizeDeps ??= {};
27
+ nuxt.options.vite.optimizeDeps.exclude ??= [];
28
+ if (!nuxt.options.vite.optimizeDeps.exclude.includes("maplibre-gl")) {
29
+ nuxt.options.vite.optimizeDeps.exclude.push("maplibre-gl");
30
+ }
31
+ addPlugin({
32
+ src: resolve("./runtime/plugins/maplibre-gl.client"),
33
+ mode: "client"
34
+ });
35
+ const composables = [
36
+ "useCreateMaplibre",
37
+ "useMaplibre",
38
+ "useCreateFillLayer",
39
+ "useCreateCircleLayer",
40
+ "useCreateLineLayer",
41
+ "useCreateSymbolLayer",
42
+ "useCreateGeoJsonSource",
43
+ "useGeoJsonSource",
44
+ "useMapEventListener",
45
+ "useLayerEventListener",
46
+ "useGeolocateEventListener",
47
+ "useFlyTo",
48
+ "useEaseTo",
49
+ "useJumpTo",
50
+ "useFitBounds",
51
+ "useCameraForBounds",
52
+ "useZoomTo",
53
+ "useZoomIn",
54
+ "useZoomOut",
55
+ "usePanBy",
56
+ "usePanTo",
57
+ "useRotateTo",
58
+ "useResetNorth",
59
+ "useResetNorthPitch",
60
+ "useSnapToNorth"
61
+ ];
62
+ addImports(
63
+ composables.map((name) => ({
64
+ name,
65
+ as: options.prefix ? `${options.prefix}${name}` : name,
66
+ from: "vue3-maplibre-gl"
67
+ }))
68
+ );
69
+ }
70
+ });
71
+
72
+ export { module$1 as default };
package/dist/runtime/plugins/maplibre-gl.client.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Client-only plugin that registers vue3-maplibre-gl components globally.
3
+ * Runs only in browser — MapLibre GL requires WebGL/canvas.
4
+ */
5
+ declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
6
+ export default _default;
package/dist/runtime/plugins/maplibre-gl.client.js ADDED
@@ -0,0 +1,30 @@
1
+ import { defineNuxtPlugin } from "#app";
2
+ import {
3
+ Maplibre,
4
+ GeoJsonSource,
5
+ FillLayer,
6
+ CircleLayer,
7
+ LineLayer,
8
+ SymbolLayer,
9
+ Marker,
10
+ Popup,
11
+ Image,
12
+ GeolocateControls
13
+ } from "vue3-maplibre-gl";
14
+ export default defineNuxtPlugin((nuxtApp) => {
15
+ const components = {
16
+ Maplibre,
17
+ GeoJsonSource,
18
+ FillLayer,
19
+ CircleLayer,
20
+ LineLayer,
21
+ SymbolLayer,
22
+ Marker,
23
+ Popup,
24
+ Image,
25
+ GeolocateControls
26
+ };
27
+ for (const [name, component] of Object.entries(components)) {
28
+ nuxtApp.vueApp.component(name, component);
29
+ }
30
+ });
package/dist/types.d.mts ADDED
@@ -0,0 +1,3 @@
1
+ export { default } from './module.mjs'
2
+
3
+ export { type ModuleOptions } from './module.mjs'
package/package.json ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ "name": "nuxt-maplibre-gl",
3
+ "version": "1.0.1",
4
+ "description": "Nuxt module for vue3-maplibre-gl — auto-import components, composables, CSS, and SSR configuration",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "author": {
8
+ "name": "Danh Nguyen",
9
+ "url": "https://harrynguyen.work"
10
+ },
11
+ "homepage": "https://github.com/danh121097/vue-maplibre-gl#readme",
12
+ "bugs": {
13
+ "url": "https://github.com/danh121097/vue-maplibre-gl/issues"
14
+ },
15
+ "repository": {
16
+ "type": "git",
17
+ "url": "https://github.com/danh121097/vue-maplibre-gl",
18
+ "directory": "nuxt"
19
+ },
20
+ "keywords": [
21
+ "nuxt",
22
+ "nuxt-module",
23
+ "nuxt3",
24
+ "maplibre",
25
+ "maplibre-gl",
26
+ "vue",
27
+ "vue3",
28
+ "map",
29
+ "webgl",
30
+ "gis"
31
+ ],
32
+ "exports": {
33
+ ".": {
34
+ "types": "./dist/types.d.mts",
35
+ "import": "./dist/module.mjs"
36
+ }
37
+ },
38
+ "main": "./dist/module.mjs",
39
+ "types": "./dist/types.d.mts",
40
+ "files": [
41
+ "dist",
42
+ "README.md"
43
+ ],
44
+ "scripts": {
45
+ "dev:prepare": "nuxt-module-build build --stub && nuxi prepare playground",
46
+ "dev": "nuxi dev playground",
47
+ "build": "nuxt-module-build build",
48
+ "prepack": "nuxt-module-build build",
49
+ "test": "vitest run",
50
+ "publish:manual": "npm publish --provenance --access public",
51
+ "publish:manual:otp": "npm publish --provenance --access public --otp=$NPM_OTP"
52
+ },
53
+ "dependencies": {
54
+ "@nuxt/kit": "^3.15.0",
55
+ "vue3-maplibre-gl": "^5.0.0"
56
+ },
57
+ "devDependencies": {
58
+ "@nuxt/module-builder": "^1.0.2",
59
+ "nuxt": "^3.15.0",
60
+ "typescript": "^5.4.0"
61
+ },
62
+ "peerDependencies": {
63
+ "nuxt": ">=3.0.0"
64
+ }
65
+ }