Skip to content

Tags

On this page

Vue Project에 Utterances 추가하기

Vue 컴포넌트에 Utterances 를 추가하고 싶었다.
vue-utterancesutterances-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

Edit this page
Last updated on 5/11/2022