An opinionated map component for Vue.
coming soon
Vue Map-Card
is an opinionated map component for Vue.
To start using the library, install it in your project:
pnpm install vue-map-card
or
yarn add vue-map-card
<!-- App.vue -->
<template>
<MapCard
street="Andra Långgatan 5"
post="413 03"
city="Gothenburg"
country="Sweden" />
</template>
<script lang="ts" setup>
import { MapCard } from 'vue-map-card'
</script>
Define a nuxt plugin
// plugins/sonner.client.ts
import { VueMapCard } from 'vue-map-card'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('MapCard', MapCard)
})
Use MapCard
component anywhere in the Vue SFC
<!-- App.vue -->
<template>
<MapCard
street="Andra Långgatan 5"
post="413 03"
city="Gothenburg"
country="Sweden" />
</template>
<script lang="ts" setup>
</script>
Add the build transpile for vue-map-card
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config'
export default defineNuxtConfig({
...
build: {
transpile: ['vue-map-card']
}
})
EMS version
https://cdn.jsdelivr.net/npm/vue-map-card/+esm
UMD version
https://www.unpkg.com/vue-map-card@0.0.1/lib/vue-map-card.umd.cjs
it is possible to exceed the maximum zoom level of
50
but it is not recommended.
It is possible to set the zoom level of the map by passing the zoom
prop. The default value is 15
but you can set it to any value between 1
and 50
.
<!-- App.vue -->
<template>
<MapCard
street="Andra Långgatan 5"
post="413 03"
city="Gothenburg"
country="Sweden"
zoom="10"/>
</template>
<script lang="ts" setup>
import { MapCard } from 'vue-map-card'
</script>
MIT @this-oliver