Vue.js 카카오링크 api에서 'Kakao' is not defined 라고 뜹니다

JavaScript
1

Vue.js 로 예제를 만들고 싶은데 설명을 그대로 따라해도 자꾸 안되네요ㅜㅜ

우선 index.html 에

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>Kakao.init("저의 자바스크립트 키");</script>

이렇게 추가했고

Vue 페이지에는 Kakao.Link.sendDefault함수를 사용해서 예제코드를 복사해서 붙여넣기 했습니다. 그런데 처음 1번만 되고 다음부터는 ‘Kakao’ is not defined 에러가 계속 뜨네요ㅜㅜ 어떻게 고쳐야 할까요?

2

참고로 Kakao 대문자로 했고 예시 코드는 그대로 넣었습니다!
그리고 정확히 말하면 어쩔땐 되고 어쩔땐 안돼요!

3

안녕하세요.

vue cli로 기본 프로젝트 생성한 것을 기준으로 설명드리면

  1. index.html에 스크립트 선언
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>window.Kakao.init("앱키");</script>

vue, react는 SPA이므로 전역에서 접근할 수 있도록 루트 html에 window.Kakao로 init합니다.

  1. HelloWord.vue 에 버튼과 함수 설정
        <img
            class="kakao_btn"
            src="@/assets/kakaolink.png"
            @click="kakaoLink"
        />

  methods: {
    kakaoLink () {
      window.Kakao.Link.sendDefault({
        objectType: 'text',
        text:
          '기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
        link: {
          mobileWebUrl:
            'https://developers.kakao.com',
          webUrl:
            'https://developers.kakao.com'
        }
      }
      )
    }
  },

여러번 시도해도 정상 작동하는 것이 확인됩니다.
참고해주세요.
image