Nuxt Kakao Map 연동

KaKao Map은 html script를 통해 지도를 불러올 수 있다.

Nuxt에서 html head에 script를 추가하기 위해서는  Nuxt Config에 다음을 작성하면 브라우저가 불러져 올때 script가 추가가 된다.

app: {
    head: {
      script: [
        {
          type: "text/javascript",
          src: `//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.KAKAO_MAP_KEY}`,
        },
      ],
    },
  },

// kakaomap.vue

<script setup lang="ts">
interface IKakaoMapProps {
  width: number | string;
  height: number | string;
}
defineProps<IKakaoMapProps>();
onMounted(() => {
  //@ts-ignore
  kakao.maps.load(() => {
    const container = document.getElementById("map");
    const options = {
      //@ts-ignore
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };
    //@ts-ignore
    const map = new kakao.maps.Map(container, options);
  });
});
</script>
<template>
  <div id="map" :style="`width:${width};height:${height}`"></div>
</template>