Join the Nuxt Team at Frontend Nation 4-7 June.
52.3K

nuxt-mapbox
nuxt-mapbox

Elegant Mapbox integration with Nuxt

6.3K downloads
74 stars
AlexLavoie42AlexLavoie42

Nuxt-Mapbox

Elegant Mapbox integration with Nuxt

📖 Check out the new docs!

npm versionnpm downloadsLicense

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
# Using pnpm
pnpm add -D nuxt-mapbox mapbox-gl

# Using yarn
yarn add --dev nuxt-mapbox mapbox-gl

# Using npm
npm install --save-dev nuxt-mapbox mapbox-gl
  1. Add nuxt-mapbox to the modules section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-mapbox'
  ]
})
  1. Add your Mapbox API key to the mapbox section of nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    'nuxt-mapbox'
  ],
  mapbox: {
    accessToken: '{API_KEY}'
  }
})

Usage

View the Mapbox GL JS Docs for reference.

Map instances are created with components. You can provide all the options through component props

Example:

    <MapboxMap
      map-id="{ID}"
      style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;"
      :options="{
        style: 'mapbox://styles/mapbox/light-v11', // style URL
        center: [-68.137343, 45.137451], // starting position
        zoom: 5 // starting zoom
      }"
    />

You can add Layers, Sources & Controls by nesting their respective components inside the Map

Examples:

    <MapboxMap
      ...
    >
      <MapboxSource 
        source-id="{ID}"
        :source="{
          type: 'geojson',
          data: '/test.geojson'
        }"
      />
      <MapboxLayer
        :layer="{
          source: '{ID}',
          id: 'geojson-layer',
          type: 'fill'
        }"
      />
      <MapboxGeolocateControl position="top-left" />
    </MapboxMap>

Development

# 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