https://github.com/AlexLavoie42/Nuxt-Mapbox
Elegant Mapbox integration with Nuxt
https://github.com/AlexLavoie42/Nuxt-Mapbox
Last synced: 4 months ago
JSON representation
Elegant Mapbox integration with Nuxt
- Host: GitHub
- URL: https://github.com/AlexLavoie42/Nuxt-Mapbox
- Owner: AlexLavoie42
- Created: 2023-02-11T08:13:38.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-09-10T19:30:19.000Z (about 1 year ago)
- Last Synced: 2024-12-05T00:33:29.414Z (12 months ago)
- Language: Vue
- Size: 14.6 MB
- Stars: 89
- Watchers: 4
- Forks: 11
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-nuxt - Nuxt-Mapbox
README
# Nuxt-Mapbox
## Elegant Mapbox integration with Nuxt
### [📖 Check out the new docs!](https://alexlavoie42.github.io/Nuxt-Mapbox/)
----------------------------------------------------------------
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
>
- [✨ Release Notes](https://github.com/AlexLavoie42/Nuxt-Mapbox/blob/main/CHANGELOG.md)
- [🏀 Online playground](https://stackblitz.com/github/AlexLavoie42/Nuxt-Mapbox?file=playground%2Fpages%2Findex.vue)
## Features
- 🏗 Easily add Mapbox to your Nuxt app with Vue components
- 🌎 useMapbox Composable for easy access
- 👷 defineMapboxMarker & defineMapboxPopup for making custom components
- 🎛️ defineMapboxControl for creating your own controls
- 📖 Persistent map instances across routes
## Quick Setup
1. Add `nuxt-mapbox` & `mapbox-gl` dependencies to your project
```bash
npx nuxi@latest module add nuxt-mapbox
npm install --save-dev mapbox-gl
```
2. Add `nuxt-mapbox` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-mapbox'
]
})
```
3. Add your Mapbox API key to the `mapbox` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: [
'nuxt-mapbox'
],
mapbox: {
accessToken: '{API_KEY}'
}
})
```
## Usage
View the [Mapbox GL JS Docs](https://docs.mapbox.com/mapbox-gl-js/guides/) for reference.
Map instances are created with components. You can provide all the options through component props
Example:
```html
```
You can add Layers, Sources & Controls by nesting their respective components inside the Map
Examples:
```html
```
## Development
```bash
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release
```
[npm-version-src]: https://img.shields.io/npm/v/nuxt-mapbox/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-mapbox
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-mapbox.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-mapbox
[license-src]: https://img.shields.io/npm/l/nuxt-mapbox.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-mapbox