Skip to content
logo
Padosum Wiki
Github
On this page

Vue Project에 Utterances 추가하기

수정하기
문서 생성 2021-08-14 21:11:13 최근 수정 2021-08-14 21:21:14
On this page

Vue 컴포넌트에 Utterances 를 추가하고 싶었다.
vue-utterances와 utterances-vue-component라는 이미 만들어진 컴포넌트들이 있었는데 모두 vue 3 버전에 가능해서 그냥 간단하게 만들기로 했다.

Comment 컴포넌트 만들기

<template>
  <div ref="comment"></div>
</template>


<script>
export default {
  props: {
    repo: String,
  },
  mounted() {
    const utterances = document.createElement('script')


    utterances.type = 'text/javascript'
    utterances.async = true
    utterances.crossorigin = 'anonymous'
    utterances.src = 'https://utteranc.es/client.js'


    utterances.setAttribute('issue-term', 'pathname')
    utterances.setAttribute('theme', theme)
    utterances.setAttribute('repo', this.repo)


    this.$refs.comment.appendChild(utterances)
  },
}
</script>


<style scoped></style>

  • utteranc.es에서 가져온 코드를 mounted()에서 불러올 수 있도록 작업한다.

  • 해당 컴포넌트를 가져올 곳에서 repo 이름을 넘기면 끝 

<template>
...
  <comment :repo="[ENTER REPO HERE]"></comment>
...
</template>


<script>
import Comment from '@/components/Comment.vue'
export default {
  components: {
      Comment,
    },
  ...
}
</script>
</script>

reference

LINKS TO THIS PAGE

Tags