onekiloparsec / vue-apple-maps

A modern Vue.js component for (Apple) MapKit JS

vue-apple-maps

A modern Vue component for Apple (MapKit JS) built with Vite.

Initially inspired by MapkitVue

Installation

npm install --save vue-apple-maps

Usage

Please follow the official MapkitJS documentation to setup your API credentials.

Once you have a token, place it inside a file .env:

VITE_APP_APPLEMAPS_TOKEN=<your token>

Then, in your Vue3 app, install the plugin (not the plural, the plugin being named like the lib):

import { createApp } from 'vue'
import App from './App.vue'

// import VueAppleMaps plugin
import VueAppleMaps from 'vue-apple-maps'

createApp(App)
  .use(VueAppleMaps, {
    authorizationCallback (done) {
      done(import.meta.env.VITE_APP_APPLEMAPS_TOKEN)
    }
  })
  .mount('#app')

Finally, in one of your components (note the singular to indicate the Map component):

<template>
  <VueAppleMap class="map"/>
</template>

<script>
  import { VueAppleMap } from 'VueAppleMaps'

  export default {
    components: { VueAppleMap }
  }
</script>