Kakao SDK plugin wrapped with Vue.js
Now you can easily use Kakao SDK with Vue.js
Just intialize plugin and type
this.$kakao
// or
window.Kakao
# yarn
yarn add vue-kakao-sdk
# npm
npm install vue-kakao-sdk
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/vue-kakao-sdk.min.js"></script>
<script type="text/javascript">
const apiKey = 'Your Kakao API Javascript Key'
Vue.use(window.VueKakaoSdk,{ apiKey: apiKey })
</script>
You can play an example on codepan
// main.js
import Vue from 'vue'
import VueKakaoSdk from 'vue-kakao-sdk'
const apiKey = 'Your Kakao API Javascript Key'
// You have to pass your "Kakao SDK Javascript apiKey"
Vue.use(VueKakaoSdk, { apiKey })
// App.vue
// then you can call kakao sdk with
// this.$kakao or window.Kakao
// in Vue Component
export default {
...
methods: {
sendKakaoLink ({ objectType, content, buttons } = {}) {
objectType = objectType || this.Link.objectType
content = content || this.Link.content
buttons = buttons || this.Link.buttons
this.$kakao.Link.sendDefault({
objectType,
content,
buttons
})
},
loginWithKakao () {
this.$kakao.Auth.login({
success: function(authObj) {
alert(JSON.stringify(authObj))
},
fail: function(err) {
alert(JSON.stringify(err))
},
})
},
shareStoryWeb () {
this.$kakao.Story.share({
url: 'https://github.com/eggplantiny/vue-kakao-sdk',
text: 'Test story share with vue-kakao-sdk'
})
}
}
}
Please use Vue3-kakao-sdk
Key | Description | Type | Default |
---|---|---|---|
* apiKey | Your Kakao SDK Javascript Key | String | * required |
scriptUrl | Link of kakao SDK | String | https://developers.kakao.com/sdk/js/kakao.min.js |
scriptId | Script ID of kakao SDK | String | kakao_script |
callback | Callback function of script loaded | Function | null |
Add vue-kakao-sdk/types
to the compilerOptions.types
section of your project's tsconfig.json
file:
{
"compilerOptions": {
"types": [
"@types/kakao-js-sdk"
]
}
}
MIT